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

Question

我有一个控制器，其中包含有关用户帐户（图标、名称、提供商等）的数据。在每个循环的输出中，我有一个视图，它将根据通过该特定模型传入的提供程序动态构建一个 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
    }
});

我有两个问题。

1. 如何将“帐户”或当前迭代的项目传递到视图中？
2. 传入后如何引用？

我确定这是经常发生的事情，但我似乎找不到任何示例。有人可以提供一些意见吗？

Answer 1

Views 在视图中有一个特殊的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');

Answer 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。请检查一下，如果您能够解决问题，请告诉我。

小提琴网址：http://jsfiddle.net/nCyn6/3/