Как повесить колбек, на полную загрузку данных ember?

Question

[Klaus Kater]

Здравствуйте, такой вопрос - через эмберовский компонент сделал табы (jquery табы), но отображаются они криво. Сначала включаются табы, потом дозагружаются данные с сервера, и табы о них конечно же не знают. У плагина табов есть специальная функция для таких случаев, tabs('refresh') но запустить его надо когда все данные загрузятся.
Как бы указать эмберу что нужно ждать, либо отловить событие дозагрузки данных а компонент? (в крайнем случае можно попробовать отловить глобальное событие дозагрузки и рефрешить табы)

App.EditorTabsComponent = Ember.Component.extend({
  didInsertElement: function() {
      App.Tabs = this.$().tabs();
      App.Tabs.tabs('refresh');
      setTimeout(function(){ // Костыль, кривой, сучковатый
        App.Tabs.tabs('refresh');
      }, 2000);
  },
})

Answer 1

[Станислав Романов]

В таких случаях нужно использовать промисы, не только в Ember.js, а вообще в javascript.

В Ember для реализации промисов используется библиотека RSVP (Tutorial with Examples).

App.EditorTabsComponent = Ember.Component.extend({
  didInsertElement: function() {
    var _this = this;
    Ember.RSVP.Promise.resolve(this.get('data')).then(function(chartData) {
      App.Tabs = _this.$().tabs();
      App.Tabs.tabs('refresh');
    });
  },
});

Где data это данные которые подгружаются с сервера. Если передать данные которые не нужно ожидать, то есть они уже загружены, промис выполнится сразу.

Answer 2

[Klaus Kater]

Кажется я совсем заизвращался.. но в таком виде оно работает. В компонент передается массив, соостветственно событие didInsertElement вызывается один раз, когда компонент создается, а дальше, необходимо отлавливать события изменения массива, и после загрузки изменений рефрешить табы......

<script type="text/x-handlebars" id="components/editor-tabs">
  <ul>
    {{#each tab in array}}
        <li><a {{bind-attr href=tab.route}}>{{tab.name}}</a></li>
    {{/each}}
  </ul>
  {{#each tab in array}}
      <div {{bind-attr id=tab.tabTitle}} {{bind-attr path=tab.id}}>
        {{tab.text}}
      </div>
  {{/each}}
  </script>

App.EditorTabsComponent = Ember.Component.extend({
  didInsertElement: function() {
    App.Tabs = this.$().tabs();
    this.array.addArrayObserver(this.array, {
      willChange: function(cows, offset, removeCount, addCount){
      },
      didChange:function(cows, offset, removeCount, addCount){

        Ember.run.scheduleOnce('afterRender', this, function(){
            App.Tabs.tabs('refresh');
        });
        console.log('didChange', cows.length, offset, removeCount, addCount);
      }
    });
  },
})