在 EmberJS 把手模板中迭代模型的属性 [英] Iterating over a model's attributes in EmberJS handlebars template

问题描述

有没有办法在 EmberJS 中迭代视图的上下文属性?我正在将 Ember-Data (https://github.com/emberjs/data) 用于 ORM.

假设我使用 connectOutlets 向具有电子邮件、姓名等属性的用户注册 UserView.在连接的 Handlebars 模板中，无论如何我可以迭代这些属性?

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

解决方案

Ryan 关于属性的看法是正确的，但需要做一些事情才能真正达到目标.我这里的示例使用的是最新的 RC1 Ember.

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

要实现这一点，我们需要一些魔法.这个控制器是一个好的开始:

App.EditMonsterController = Em.ObjectController.extend({元数据:函数(){var vals = [];var attributeMap = this.get('content.constructor.attributes');attributeMap.forEach(function(name, value) {vals.push(value);});返回值；}.property('内容')});

它使用 Ryan 提到的属性"属性来提供元数据，我们将这些元数据输入到模板中的 #each 中！

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

App.AutoTextField = Ember.ContainerView.extend({类型:空，名称:空，初始化:函数(){this._super();this.createChildView();},创建子视图:函数(){this.set('currentView', Ember.TextField.create({值绑定:'控制器.'+ this.get('name'),类型:this.get('type')}));}.observes('name', 'type')});

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

Is there a way to iterate over a view's context's attributes in EmberJS? I am using Ember-Data (https://github.com/emberjs/data) for ORM.

Lets say I use connectOutlets to register a UserView with a user that has attributes such as email, name, etc. In the connected Handlebars template, is there anyway that I can iterate over those attributes?

I basically need to build a generic view that can be reused with different models...

解决方案

Ryan is right about the attributes, but it takes some doing to actually get where you're going. My examples here are using the latest RC1 Ember.

Here is an editor template that is model agnostic:

<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>

To make that work, we need a couple of pieces of magic-magic. This controller is a good start:

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')

});

That uses that "attributes" property that Ryan mentioned to provide the metadata that we are feeding into our #each up there in the template!

Now, here is a view that we can use to provide the text input. There's an outer container view that is needed to feed the valueBinding in to the actual textfield.

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')
});

Here is a fiddle demonstrating the whole crazy thing: http://jsfiddle.net/Malkyne/m4bu6/

这篇关于在 EmberJS 把手模板中迭代模型的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！