4

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

我有以下模型：

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

但是绑定属性似乎不起作用

顺便说一句：我正在使用会徽和咖啡脚本

4

1 回答 1

3

link-to是一个 Ember 视图助手，所以（受此启发）我最初建议使用attributeBindings，但会引发以下 JS 错误：

不允许通过 Handlebars 设置“attributeBindings”。请继承 Ember.View 并将其设置在那里。

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

但是，如果（看起来）您需要设置的唯一属性是style，您可以创建一个具有所需样式的 CSS 类，然后设置classNames，如此处所述，即：

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

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

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

尽管不鼓励，但您应该能够通过重新打开类并添加到该style属性来绑定：LinkViewstyleattributeBindings

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% 确定绑定会以这种方式正常工作，因为这些绑定通常用于纯文本，而不是属性。

于 2013-09-24T21:19:54.713 回答