How to hang up a callback for a full load of ember data?

Question

Ember.js

Hello, such a question - I made tabs through the ember component (jquery tabs), but they are displayed crookedly. First, the tabs are enabled, then the data is loaded from the server, and the tabs, of course, do not know about them. The tab plugin has a special function for such cases, tabs('refresh') but it needs to be run when all the data has loaded.
How would you tell the ember to wait, or catch the event of reloading data in the component? (as a last resort, you can try to catch the global reload event and refresh the tabs)

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

Answer 1

In such cases, you need to use promises , not only in Ember.js, but in general in javascript.
Ember uses the RSVP ( Tutorial with Examples ) library to implement promises.

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');
    });
  },
});

Where data is the data that is loaded from the server. If you pass data that does not need to be expected, that is, it is already loaded, the promise will be executed immediately.

Answer 2

It seems I was completely perverted .. but in this form it works. An array is passed to the component, respectively, the didInsertElement event is called once when the component is created, and then it is necessary to catch the array change events, and after loading the changes, refresh the tabs......

<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);
      }
    });
  },
})