Initialize a jQuery plugin when the content for an Ember.View has loaded

Question

DEBUG: Ember.VERSION : 1.0.0-rc.6 ember.js
DEBUG: Handlebars.VERSION : 1.0.0-rc.4 ember.js
DEBUG: jQuery.VERSION : 1.9.1

The controller is an Ember.ArrayContoller & the content is loaded via the DS.RESTAdapter.

This is the code I think I want, but it is never executed. I want to add an observer to controller.content for the isLoaded event.

App.ThumbnailScrollerView = Ember.View.extend({
  tagName: "div",
  didInsertElement: function() {
    return this.get("controller.content").addObserver("isLoaded", function() {
      return $(".jThumbnailScroller").thumbnailScroller();
    });
  }
});

This code is executed, but once for each object, I really only want it for the last object. controller.content.@each

App.ThumbnailScrollerView = Ember.View.extend({
  tagName: "div",
  didInsertElement: function() {
    return this.get("controller.content.@each").addObserver("isLoaded", function() {
      return $(".jThumbnailScroller").thumbnailScroller();
    });
  }
});

This is also never executed. controller.content.lastObject

App.ThumbnailScrollerView = Ember.View.extend({
  tagName: "div",
  didInsertElement: function() {
    return this.get("controller.content.lastObject").addObserver("isLoaded", function() {
      return $(".jThumbnailScroller").thumbnailScroller();
    });
  }
});

Answer 1

I believe controller.content is a ManyArray and ManyArrays do not implement isLoaded. They do have an isUpdating property.

Template:

{{#if content.isUpdating}}
  LOADING...
{{else}}
  {{view App.ThumbnailScrollerView}}
{{/if}}

App.ThumbnailScrollerView:

 setupThumbnailScroller: function() {
   this.$('.jThumbnailScroller').thumbnailScroller();
 }.on('didInsertElement')