0

現在、EmberJS 2.6 と EmberFire を使用してリアルタイム ゲームを構築しています。Web サイトにユーザーが 1 人しかいない場合は「対戦相手を待っています」というモーダルを表示し、2 人の場合は非表示にしたいと考えています。

現在、ユーザーが Web サイトにアクセスしたときに Firebase にユーザーを追加し、ブラウザー ウィンドウを閉じたときにユーザーを削除することができます。私が抱えている問題は、Web サイトに 1 人のユーザーがいるときにモーダルが表示されますが、2 番目のユーザーが接続しても消えないことです。

デバッグ目的で、以下の my-modal.hbs ファイルに {{isShowingModal}} を追加してみました。1 つのタブ (つまり 1 人のユーザー) で Web サイトを開くと、「true」が表示されます。2 番目のタブ (つまり 2 番目のユーザー) で Web サイトを開くと、「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);
        }
    }

});
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 に答える