Emberjs bindAttr在#each里面

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这个解决方案.