ember.js - Ember : How can I set bind-attr for a link-to?

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)属性似乎不起作用

顺便说一句:我正在使用会徽和 CoffeeScript

Answer 1

link-to是一个 Ember View 助手，所以(受 this 启发)我原本打算建议 using attributeBindings ，但会引发以下 JS 错误:

Setting 'attributeBindings' via Handlebars is not allowed. Please subclass Ember.View and set it there instead.

看起来如果你真的需要以这种方式设置属性，可以通过 reopening 进行设置。 Ember.LinkView类和设置 attributeBindings那里，但请注意，这将影响每个 link-to在您的页面上。

但是，如果(看起来)您需要设置的唯一属性是 style ，您可以创建一个具有所需样式的 CSS 类，然后设置 classNames ，如讨论 here ， IE。:

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

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

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

虽然气馁，您应该能够绑定(bind)到 style通过重新打开 LinkView 属性类和添加 style到 attributeBindings :

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

那么您可能可以为 style 设置一个值属性:

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

在哪里 favStyle是您的模型或(理想情况下)您的 Controller 上的计算属性:

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

但是我没有对此进行测试，我也不能 100% 确定绑定(bind)会以这种方式正常工作，因为这些绑定(bind)通常用于纯文本，而不是属性。