Question

我正在尝试将retina.js与Ember一起使用，而我遇到了问题。 Retina.js会将img元素换成@ 2x版本（如果存在），并且仅在刷新页面时才这样做。显然我可以循环遍历img元素并为AJAX响应创建一个新的RetinaImage实例，这似乎也适用于渲染Ember视图，但问题是它在初始加载页面时会执行两次。我已经查看了didInsertElement，但是在插入并重新呈现视图时它会触发。有没有办法只限制新的RetinaImage（这个）来查看重新渲染？

相关代码：

Ember.View.reopen({
  didInsertElement: function() {
    this._super();
    $('img').each(function() {
      new RetinaImage(this);
    });
  }
});

Answer 1

这样做的问题是，注入页面的每个视图都会运行此代码，对每个图像，您可能会在一个图像上运行100次视网膜图像。你真的应该将它集中到你插入图像的每个实例。

想象一下Foo视图有一些图像，你可以这样做：

App.ImageView = Ember.View.extend({
  setupRetina: function() {
    this.$('img').each(function() {
      new RetinaImage(this);
    });
  }.on('didInsertElement')
});

或者甚至更好的是从中创建一个组件：

App.RetinaImageComponent = Ember.Component.extend({
  setupRetina: function() {
    this.$('img').each(function() {
      new RetinaImage(this);
    });
  }.on('didInsertElement')
});

您可以在此处详细了解组件：http://emberjs.com/api/classes/Ember.Component.html

Ember.js只执行重新渲染

1 个答案: