6 
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.

这是我认为我想要的代码，但它从未执行过。我想controller.content为该isLoaded事件添加一个观察者。

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

2 回答 2

6

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

模板：

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

App.ThumbnailScrollerView：

 setupThumbnailScroller: function() {
   this.$('.jThumbnailScroller').thumbnailScroller();
 }.on('didInsertElement')
于 2013-07-25T20:52:02.880 回答
0

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

当您从服务器获取数据时，使用RESTAdapter将导致在您的钩子中返回一个承诺。model路由器的工作流程类似于，

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

因此，当视图呈现时，数据已经完成加载。这@each用于迭代内容的计算属性，与此处无关

现在，如果我对问题的理解是正确的。您有一些通过模型钩子加载的内容，并写出thumbnail scroller期望的 DOM。

这些图像完成加载后，您要调用thumnailScroller()目标 div 上的 ，这将初始化此插件。

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

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

imagesLoaded为类似的事件提供回调always并done监视此类图像完成事件。你的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 承诺，但同样的原则也适用于 ember-data 的RESTAdapter.

于 2013-07-25T11:36:31.110 回答