ember.js - 在 EmberJS handlebars 模板中迭代模型的属性

Question

有没有办法在 EmberJS 中迭代 View 上下文的属性？我正在为 ORM 使用 Ember-Data (https://github.com/emberjs/data)。

假设我使用 connectOutlets 向具有电子邮件、姓名等属性的用户注册 UserView。在连接的 Handlebars 模板中，我是否可以迭代这些属性？

我基本上需要构建一个可以在不同模型中重复使用的通用 View ...

Answer 1

Ryan 对这些属性的看法是正确的，但需要做一些工作才能真正到达目的地。我这里的示例使用的是最新的 RC1 Ember。

这是一个与模型无关的编辑器模板:

<script type="text/x-handlebars" data-template-name="edit_monster">
    {{#if clientId}}
    <h1>Edit Monster: {{name}}</h1>
    <div>
        {{#each metadata}}
            <span class="edit-label">{{name}}</span>
            <span class="edit-field">
                {{view App.AutoTextField typeBinding="type" nameBinding="name" }}
            </span>
        {{/each}}
    </div>
    {{else}}
    No monster selected.
    {{/if}}  
</script>

要实现这一点，我们需要一些魔法。这个 Controller 是一个好的开始:

App.EditMonsterController = Em.ObjectController.extend({
    metadata: function() {
        var vals = [];
        var attributeMap = this.get('content.constructor.attributes');
        attributeMap.forEach(function(name, value) {
             vals.push(value);   
        });
        return vals;
    }.property('content')

});

它使用 Ryan 提到的“attributes”属性来提供我们输入到模板中 #each 的元数据!

现在，这是一个我们可以用来提供文本输入的 View 。需要一个外部容器 View 来将 valueBinding 提供给实际的文本字段。

App.AutoTextField = Ember.ContainerView.extend({
    type: null,
    name: null,

    init: function() {
        this._super();
        this.createChildView();
    },
    createChildView: function() {
         this.set('currentView', Ember.TextField.create({
                    valueBinding: 'controller.' + this.get('name'),
                    type: this.get('type')
                }));   
    }.observes('name', 'type')
});

这是一个演示整个疯狂事情的​​ fiddle :http://jsfiddle.net/Malkyne/m4bu6/