加载Ember.View的内容时初始化jQuery插件

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 

控制器是Ember.ArrayContoller ，内容通过DS.RESTAdapter加载。

这是我想要的代码，但它永远不会被执行。 我想为一个isLoaded事件的controller.content添加一个观察者。

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

这个代码被执行，但是对于每个对象，我真的只想要它用于最后一个对象。 controller.content.@each

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

这也永远不会执行。 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

我相信controller.content是一个ManyArray而ManyArrays没有实现isLoaded。 他们有一个isUpdating属性。

模板：

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

App.ThumbnailScrollerView：

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

Answer 2

由于您在Ember到达视图/模板时使用RESTAdapter ，因此观察isLoaded已经太晚了。 这是设计和RC.6中Async路由器背后的关键思想。

当您从服务器获取数据时，使用RESTAdapter将导致在model挂钩中返回承诺。 路由器的工作流程是这样的，

1. model hook通过MyModel.find等查找数据，并返回一个promise。
2. 异步路由器在看到promise并等待提取完成时暂停。
3. 然后路由器调用setupController并连接返回控制器的数据。
4. 最后调用renderTemplate以使用此数据呈现模板。

因此，在视图呈现时，数据已完成加载。 @each用于迭代内容的计算属性，在此处不相关。

现在，如果我对这个问题的理解是正确的。 您有一些内容通过模型钩子加载，并在相应的模板中写出thumbnail scroller所需的DOM。

在这些图像加载完之后，你想在目标div上调用thumnailScroller() ，这会初始化这个插件。

即： – 您希望在加载所有图像时挂钩事件，而不是在加载支持内容的数据时挂钩。

Ember不为图像加载提供任何此类事件。 您需要使用像imagesLoaded这样的外部库来执行此操作。

imagesLoaded为诸如此类事件的事件提供回调，以便观察此类图像完成事件。 你的didInsertElement方法是，

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

这是一个jsbin示例。 它使用Flickr API的jQuery promises，但同样的原则适用于ember-data的RESTAdapter 。