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。

现在您必须在 View FooView 的模板中添加 Collection View :

<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 的内容绑定(bind)到 FooCollectionView。

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

我建议您阅读Ember.CollectionView documentation .

和you could try this solution in this JSFiddle .