Question

我目前正在使用EmberJS 2.6和EmberFire来构建实时游戏。我希望在网站中只有一个用户时显示一个“等待对手”的模态，当有2个用户时隐藏它。

目前，我可以在用户访问网站时将其添加到Firebase，并在关闭浏览器窗口时将其删除。我遇到的问题是，当网站中有一个用户时，模态会显示，但是当第二个用户连接时，模态不会消失。

出于调试目的，我尝试将{{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而不是更新它的原因是因为它位于列表中的组件内部。

我建议的是移动代码以显示/隐藏组件和控制器中的模态。像这样：

//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：如何根据登录网站

1 个答案: