ember.js - #each 中的 Emberjs bindAttr

Question

视图代码是

Ember.View.extend({
        template: Ember.Handlebars.compile(html), // html is in string
        content: function() {
            return [
            { Title: "Dashboard", ID: "dashboard" },
            { Title: "Invoices", ID: "invoices" },
            { Title: "Expenses", ID: "expenses" },
            { Title: "People", ID: "people" },
            { Title: "Reports", ID: "reports" },
            { Title: "Settings", ID: "settings" }
        ]},
        iconClass: function(link){
          return "icon icon-" + link.ID
        }
    });

模板（上面显示为“html”）如下所示：

<ul>
    {{#each link in view.content}}
    <li>
        <a>
            <span class="icon" {{bindAttr class="view.iconClass(link)"}}></span>
            <span class="title">{{link.Title}}</span>
        </a>
    </li>
    {{/each}}
</ul>

这呈现

<span class="icon" data-bindattr-2="2"></span>

因此不会呈现附加的类属性。我在范围上做错了吗？

笔记：

我更改了代码以显示我想要做什么。

Answer 1

编辑

根据新问题，您必须使用Ember.CollectionView：

App.FooCollectionView = Ember.CollectionView.extend({
    itemViewClass: Ember.View.extend({
        iconClass: function() {
             return "icon-dashboard icon " + this.get('content.ID');
        }.property('content.ID')
    })
});

正如你所看到的，每个itemViewClass都有一个iconClass依赖于它的属性content.id。

现在您必须在视图的模板中添加集合视图FooView：

<ul>
    {{#collection App.FooCollectionView contentBinding="view.content"}}
    <li>
        <a>
            <span {{bindAttr class="view.iconClass"}}>foo</span>
            <span class="title">{{view.content.Title}}</span>
        </a>
    </li>
    {{/collection}}
</ul>

这里我们使用{{collection}}Handlebars 助手，我们FooView将FooCollectionView.

它将自动itemViewClass为 CollectionView.content 中的每个对象创建一个实例，将其设置为关联对象，并将其添加到视图中。

我建议您阅读Ember.CollectionView 文档。

您可以在此JSFiddle中尝试此解决方案。

Answer 2

对于其他遇到 bindAttr 问题的人，结果如下：

data-bindattr-1="1"

确保您正在使用

{{bindAttr src="myvariable"}} 代替{{bindAttr src="{{myvariable}}"}}

可能会为您节省一些时间来寻找答案，这就是导致我的代码无法工作的原因。

Answer 3

另一种简单的方法是向模型添加计算属性。在下面的示例中，我需要一个专门的样式属性。

模型 - -

App.Photo = Em.Object.extend(
  objectId: null
  url: ""
  style: (-> 
    "background-image:url('" + @get("url") + "')"
  ).property("url")
)

模板 - - -

{{#each item in App.photoController}}
<div {{bindAttr style="item.style"}}></div>
{{/each}}