Initialize jQuery plugin when loading content for Ember.View

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 , and the content is loaded via DS.RESTAdapter .

This is the code that I think I want, but it never executes. I want to add an observer in 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 want it only 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(); }); } }); 

It 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 ManyArray and ManyArrays that do not implement isLoaded. They have the isUpdating property.

Template:

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

App.ThumbnailScrollerView:

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

Answer 2

Since you are using RESTAdapter by the time Amber enters the view / template, it is too late to observe isLoaded . This is the design and key idea of ​​the Async router in RC.6.

Using the RESTAdapter will return the promise to your model hook when receiving data from the server. The router workflow is something like

• model hook views data using MyModel.find etc. and returns the promise.
• The asynchronous router pauses when it sees a promise and waits for the completion of the fetch.
• The router then calls setupController and connects the data returned to the controller.
• Finally, renderTemplate is called to render the template with this data.

So, by the time the presentation was submitted, the data had finished loading. @each is for a computed property that iterates through the contents and doesn't matter here.

Now, if my understanding of the question is correct. You have content that is loaded using the model hook and writes the DOM that the thumbnail scroller in your respective template.

After these images have finished loading, you want to call thumnailScroller() on the target div that initializes this plugin.

i.e.: - you want to connect to the event when all the images are loaded, and not when the data that supports the content is loaded.

Ember does not provide such events for image loading. To do this, you need an external library, such as imagesLoaded .

imagesLoaded provides callbacks for events such as always and done to watch for such image completion events. Your didInsertElement method for this will be,

 didInsertElement: function() { var _this = this; var loader = imagesLoaded('.jThumbnailScroller'); loader.on('always', function() { _this.$('.loader').hide(); _this.$('.jThumbnailScroller').thumbnailScroller(); }); loader.on('progress', function(loader, image) { _this.set('nowLoading', image.img.src); }); } 

Here is a jsbin example. It uses jQuery promises to API Flickr, but the same principles apply to the data-data ember RESTAdapter .