Ember.js仅对重新渲染执行

Question

我正在尝试使用retina.js和Ember，但我遇到了一个问题。如果存在@2x版本，Retina.js将用@2x替换img元素，并且只在页面刷新时这样做一次。显然，我可以遍历img元素并为AJAX响应创建一个新的RetinaImage实例，这似乎也适用于Ember视图的呈现，但问题是它在页面初始加载时执行了两次。我研究过didInsertElement，但它会在插入和重新呈现视图时触发。有没有一种方法可以限制新的RetinaImage(this)来查看重现器？

相关代码：

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

你可以在这里阅读更多关于component的内容：http://emberjs.com/api/classes/Ember.Component.html