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

时间:2013-02-26 05:39:49

标签: ember.js handlebars.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
    }
});

我的问题是双重的。

  1. 如何将“帐户”或当前迭代的项目传入视图?
  2. 传递之后,你如何引用它?
  3. 我确信这是经常发生的事情,但我似乎无法找到任何例子。有人可以提供一些意见吗?

2 个答案:

答案 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。请检查并告诉我您是否能够解决问题。

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