EmberJS + EmberFire：如何根据登录网站的用户数量 display/hide 模态

Question

我目前正在使用 EmberJS 2.6 和 EmberFire 构建实时游戏。我想显示一个模式，当网站上只有一个用户时显示 'Waiting for Opponents'，当有 2 个时隐藏。

目前，我可以在用户访问网站时将用户添加到 Firebase，并在他们关闭浏览器时将其删除 window。我遇到的问题是，当网站上有一个用户时，模式会出现，但当第二个用户连接时，模式不会消失。

出于调试目的，我尝试将 {{isShowingModal}} 添加到下面的 my-modal.hbs 文件中。如果我在一个选项卡（即一个用户）上打开网站，则会显示 'true'。如果我在第二个选项卡（即第二个用户）上打开网站，我会看到 'true' 'false'。为什么 ember 模板不简单地更新 isShowingModal 属性的值（而不是再次将其添加到视图中）？

关于如何解决这个问题并正确显示模式有什么想法吗？请参阅下面的代码。谢谢！！！

// app/templates/index.hbs

{{#each users as |user index|}}
    {{my-modal userIndex=index}}
{{/each}}

{{outlet}}

// app/templates/components/my-modal.hbs

{{#if isShowingModal}}
    {{#modal-dialog close="closeModal"
                    translucentOverlay=true}}

        <div class="modal">
            <div id="waitingMessage">
                <h1>Waiting for Opponent</h1>
                <img src="assets/images/loading-icon.gif">
            </div>
        </div>
    {{/modal-dialog}}
{{/if}}

{{yield}}

// app/components/my-modal.js

import Ember from 'ember';

export default Ember.Component.extend({

    userArr: Ember.ArrayProxy.create({content: []}),
    isShowingModal: null,

    init() {
        this._super(...arguments);
        var self = this;

        this.get('userArr').pushObject(self.attrs.userIndex.value);

        if(this.get('userArr').content.length < 2) {
            this.set('isShowingModal', true);
        } else {
            this.set('isShowingModal', false);
        }

    },

    willDestroyElement() {
        this._super(...arguments);
        var self = this;

        this.get('userArr').popObject(self.attrs.userIndex.value);

        if(this.get('userArr').content.length < 2) {
            this.set('isShowingModal', true);
        }
    }

});

Answer 1

ember 添加 showModal 而不是更新它的原因是因为它位于列表内的组件内。

我建议的是将代码移到 show/hide 组件之外的模态并移到控制器中。像这样：

//app/controllers/index.js
import Ember from 'ember';

export default Ember.Controller.extend({
  // Other code
  shouldShowModal: Ember.computed('users.[]', function() {
    if (this.get('users.length') < 2) { return false; }
    return true;
  })
})

然后在您的模板中

//app/templates/index.hbs
...
{{#if shouldShowModal}}
  ... code to show modal
{{/if}}
....

这样您就可以访问用户列表的长度，并可以控制显示基于该列表的模式。

EmberJS + EmberFire：如何根据登录网站的用户数量 display/hide 模态

EmberJS + EmberFire: How to display/hide modal based on the number of users logged to website

javascript

modal-dialog

ember.js

firebase

emberfire