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。

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

我建议你阅读Ember.CollectionView documentation。

you could try this solution in this 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}}

Emberjs bindAttr在#each里面

3 个答案: