Emberjs bindAttr里面#each [英] Emberjs bindAttr inside of #each

问题描述

视图的代码是

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）如下所示：

Template (show above as "html") looks like this:

<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>

所以没有渲染附加的类属性。我做错了范围吗？

So additional class attribute is not rendered. Am I doing something wrong with scope or?

注意：

我已更改我的代码显示我想要做的。

I changed my code to show what I want to do.

推荐答案

编辑

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

According to the new question, you'll have to use an 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 。

As you can see, each itemViewClass has a property iconClass which depends on its content.id.

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

Now you'll have to add the collection view in the template of the view 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 。

Here we are using the {{collection}} Handlebars helper, and we bind the content of the FooView to the FooCollectionView.

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

It will automatically create an itemViewClass instance for each object in the CollectionView.content, set the its to the associated object, and add it to the view.

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

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

这篇关于Emberjs bindAttr里面#each的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！