Ember.js:将模型传递到视图中

com*_*ted 8 handlebars.js ember.js

我有一个控制器,其中包含有关用户帐户(图标,名称,提供商等)的数据.在每个循环的输出中,我有一个视图,它将根据通过该特定模型传入的提供者动态构建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
    }
});
Run Code Online (Sandbox Code Playgroud)

我的问题是双重的.

  1. 如何将"帐户"或当前迭代的项目传递到视图中?
  2. 传递之后,你如何引用它?

我确信这是经常发生的事情,但我似乎无法找到任何例子.有人可以提供一些意见吗?

Shi*_*nko 11

视图content在视图中具有一个特殊属性,允许更简单的方法:您只需使用模型属性的名称而不使用该view.content.部分.
此外,当您在控制器上进行迭代时,可以省略循环变量的名称,this而不是像本指南中那样使用.这不是必需的,但可以使代码更清洁.
此外,从视图的模板中,您通常不需要引用外部变量,但如果您愿意,也可以.

{{#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}}
Run Code Online (Sandbox Code Playgroud)

您可以随时content从视图中访问该属性:

this.get('content');
Run Code Online (Sandbox Code Playgroud)