0

我目前正在使用 EmberJS 2.6 和 EmberFire 来构建实时游戏。当网站中只有一个用户时，我想显示一个模式，上面写着“等待对手”，当有 2 个用户时隐藏。

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

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

关于如何解决此问题并正确显示模态的任何想法？请参阅下面的代码。谢谢！！！

// 应用程序/模板/index.hbs

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

{{outlet}}

// 应用程序/模板/组件/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}}

// 应用程序/组件/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);
        }
    }

});
4

1 回答 1

0

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}}
....

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

于 2016-06-30T22:41:46.200 回答