我有一个控制器,其中包含有关用户帐户(图标,名称,提供商等)的数据。在每个循环的输出中,我有一个视图,它将根据通过该特定模型传入的提供者动态构建CSS类。
<script type="text/x-handlebars" data-template-name="accountItem">
{{#each account in controller}}
{{#view App.AccountView}}
<h4>{{account.name}}</h3>
<img {{bindAttr src="account.icon"}} />
<i {{bindAttr class="account.provider"}}></i>
{{/view}}
{{/each}}
</script>
App.AccountView = Ember.View.extend({
tagName: 'a',
classNames: ['avatar-image'],
providerClass: function(el) {
// do something
}
});
我的问题是双重的。
我确信这是经常发生的事情,但我似乎无法找到任何例子。有人可以提供一些意见吗?
答案 0 :(得分:11)
视图在视图中有一个特殊的content
属性,允许更简单的方法:您只需使用模型属性的名称,而不使用view.content.
部分。
此外,当您在控制器上进行迭代时,您可以省略循环变量的名称并改为使用this
,就像在this guide中一样。这不是必需的,但可以使代码更清洁
此外,从视图的模板中,您通常不需要引用外部变量,尽管如果您愿意,也可以。
{{#each controller}}
{{#view App.IndexView contentBinding="this"}}
<h4>{{name}}</h4>
<img {{bindAttr src="icon"}} />
<i {{bindAttr class="provider"}}></i>
<i> {{icon}} </i>
<i>{{provider}}</i>
{{/view}}
{{/each}}
您始终可以在视图中访问content
属性:
this.get('content');
答案 1 :(得分:2)
当前迭代的项目可以借助属性绑定传递到视图中,并且可以在模板中将其称为“{{view.property}}”。例如:
{{#each account in controller}}
{{#view App.IndexView itemBinding="account"}}
<h4>{{view.item.name}}</h3>
<img {{bindAttr src="account.icon"}} />
<i {{bindAttr class="account.provider"}}></i>
<i> {{view.item.icon}} </i>
<i>{{view.item.provider}}</i>
{{/view}}
{{/each}}
我为上面的例子创建了一个简单的jsfiddle。请检查并告诉我您是否能够解决问题。