简体   繁体   中英

Reload current route in emberjs

I currently have a controller that does some asynchronous loading of a list of data. In several other controllers I have functions that observe when this loading is finished and reload some models.

Small setup of my project:

App.SyncController = Ember.ObjectController.extend({
  finished: false,

  init: function() {
    var self = this;
    $.get('/data', function(data) {
      // Process data
      self.set('finished', true);
    });
  }
});

App.OverviewController = Ember.ObjectController.extend({
  needs: ['sync'],

  finishedSyncingObserver: function() {
    // Reload or update some data in this controller
  }).observes('controllers.sync.finished')
});

App.DetailController = Ember.ObjectController.extend({
  needs: ['sync'],

  finishedSyncingObserver: function() {
    // Reload or update some data in this controller
  }).observes('controllers.sync.finished')
});

In this example both the observers are being called when the jQuery get finishes. However, is it possible to see which controller is active so only one observer is executed?

Thanks

Although I have to admit that @Marcio is right in his comment, because the init function of a controller is only invoked once, but not knowing you exact use case it will be maybe ok, therefore here are two kind of naive approaches.

What about using two different boolean's, and observe these

App.SyncController = Ember.ObjectController.extend({
  finishedOverview: false,
  finishedDetail: false,

  init: function() {
    var self = this;
    $.get('/data', function(data) {
      // Process data
      if(thereIsDataForDetail) {
        self.set('finishedDetail', true);
      }
      if(thereIsDataForOverview) {
        self.set('finishedOverview', true);
      }
    });
  }
});

App.OverviewController = Ember.ObjectController.extend({
  needs: ['sync'],

  finishedSyncingObserver: function() {
    // Reload or update some data in this controller
  }).observes('controllers.sync.finishedOverview')
});

App.DetailController = Ember.ObjectController.extend({
  needs: ['sync'],

  finishedSyncingObserver: function() {
    // Reload or update some data in this controller
  }).observes('controllers.sync.finishedDetail')
});

Or the other way around without endeavouring observer

App.SyncController = Ember.ObjectController.extend({
  needs: ['overview', 'detail'],

  init: function() {
    var self = this;
    $.get('/data', function(data) {
      // Process data
      if(thereIsDataForDetail) {
        self.get('controllers.detail').send('setNewData', data);
      }
      if(thereIsDataForOverview) {
        self.get('controllers.overview').send('setNewData', data);
      }
    });
  }
});

App.OverviewController = Ember.ObjectController.extend({
  setNewData: function(data) {
    // Reload or update some data in this controller
  })
});

App.DetailController = Ember.ObjectController.extend({
  setNewData: function(data) {
    // Reload or update some data in this controller
  })
});

Of course this simple approaches would not scale well if you had more then two controllers that rely on the sync controller.

Edit in response to your last comment

If you need the current route at any point in time here is how you could do it:

var App = Ember.Application.create({
  currentPath: ''
});

App.ApplicationController = Ember.Controller.extend({
  currentPathChanged: function() {
    App.set('currentPath', this.get('currentPath'));
  }.observes('currentPath')
});

Then from inside your ajax callback you can do this to get the current route:

App.get('currentPath');

Hope it helps.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM