EmberJS + EmberFire: Как отобразить / скрыть модальные данные в зависимости от количества пользователей, вошедших на сайт

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

// приложение / шаблоны / компоненты / 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}}
....

Таким образом, у вас есть доступ к длине списка пользователей, и вы можете контролировать показ мод на основе этого.