Q:

Ember Data Only Load Async attributes when rendered to Handlebars Template

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

A:

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

