ember：如何为链接设置bind-attr？

Question

我想设置链接到帮助器的样式，但不太了解如何。

我有以下型号：

App.ArtistFavorite = DS.Model.extend
  name: DS.attr 'string'
  image_url: DS.attr 'string'

我的模板：

li
  link-to 'artistFavorite' this {bind-attr style="background-image: url('image-url');"}

但是bind-attr似乎不起作用

顺便说一句：我正在使用会徽和coffeescript

Answer 1

link-to是一个Ember视图帮助器，所以（灵感来自this）我最初建议using attributeBindings，除了引发以下JS错误：

  

不允许通过Handlebars设置'attributeBindings'。请将Ember.View子类化并将其设置在那里。

看起来如果您真的需要以这种方式设置属性，可以通过reopening Ember.LinkView类并在那里设置attributeBindings来实现，但请注意这一点会影响您网页上的每个link-to。

但如果（如图所示）您需要设置的唯一属性是style，则可以创建一个包含所需样式的CSS类，然后设置classNames，如上所述{{3} }，即：

{{#link-to 'artistFavorite' this classNames="your-class-name"}}

从代码风格的角度来看，即使可以（更容易）直接设置style属性，我也会采用这种方法。

---

编辑：只是意识到您正在尝试使用相应项目的某个属性为每个链接单独设置样式，因此显然CSS类不起作用。我已经考虑过这个了。

虽然不鼓励，但您应该能够通过重新打开style课程并将LinkView添加到style来绑定attributeBindings属性：

Ember.LinkView.reopen({
  attributeBindings: ["style"]
})

然后可能您可以为style属性设置一个值：

{{#link-to 'artistFavorite' this style=favStyle}}

其中favStyle是您的模型或（理想情况下）您的控制器上的计算属性：

favStyle: function() {
  return "background-image: url('" + this.get('image_url') + "');";
}.property('image_url')

但是我没有对此进行测试，我并不是100％肯定绑定会以这种方式正常工作，因为这些绑定通常用于纯文本，而不是属性。