Ember Data Only Load Async attributes when rendered to Handlebars Template

Question

I'd like to only have Ember load associated data when it's needed and rendered to the template. I thought setting async to true would do that, but it simply loads the data asynchronously as soon as the parent object is rendered. Alternatively, I'm trying to only load it when an action has occurred.

JS Bin of code is here (non-working, but shows general idea): http://jsbin.com/tekaju/2/edit

For those not caring to check it out, gist is:

Models.Visit = DS.Model.extend({
 visitors: DS.hasMany("user", { async: true })
});


VdAdmin.VisitController = Ember.ObjectController.extend({
  showVisitors: false,
  showVisitorsObserver: function(value){
    showVisitors = value;
    return value;
  }.observes('showVisitors')
  actions: {
    loadVisitors: function(){
      this.set('showVisitorsObserver', true);
    }
  }
});

<button ... {{action 'loadVisitors'}}>Click to Load</button>
{{#if showVisitorsObserver }}
   I don't want to asynchronously grab related `visitors` data until `showVisitors` is true
   {{visitors.length}}
{{/if}}

Kingpin2k Kingpin2k · Accepted Answer · 2014-09-26T03:59:53

You shouldn't be watching an observer, it doesn't return values. It's used for reaction, not as a property. You should instead watch showVisitors.

App.ItemController = Em.ObjectController.extend({
  showVisitors:false,
  actions: {
    loadVisitors: function(){
      this.set('showVisitors', true);
    }
  }
});

{{#if showVisitors }}
   I don't want to asynchronously grab related `visitors` data until `showVisitors` is true
   {{visitors.length}}
{{/if}}

Example: http://emberjs.jsbin.com/qabaf/4/edit

Ember Data Only Load Async attributes when rendered to Handlebars Template

1 Answers