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

控制器是Ember.ArrayContoller＆amp;内容通过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();
    });
  }
});

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挂钩中返回承诺。路由器的工作流程就像是，

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

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

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

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

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

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。

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

2 个答案: