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

问题描述

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

说我使用connectOutlets向用户注册一个UserView具有电子邮件，名称等属性。在连接的Handlebars模板中，有没有可以迭代这些属性？

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

解决方案

Ryan对于属性是正确的，但实际上需要做一些你要去哪儿。我的例子是使用最新的RC1 Ember。

这是一个模型不可知的编辑器模板：

 < script type =text / x-handlebarsdata-template-name =edit_monster> 
 {{#if clientId}} 
< h1>编辑怪物：{{name}}< / h1> 
< div> 
 {{#each metadata}} 
< span class =edit-label> {{name}}< / span> 
< span class =edit-field> 
 {{view App.AutoTextField typeBinding =typenameBinding =name}} 
< / span> 
 {{/ each}} 
< / div> 
 {{else}} 
没有选中怪物。 
 {{/ if}} 
< / script> 
  

为了做这个工作，我们需要几个魔法魔法。这个控制器是一个很好的开始：

  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属性来提供我们加入我们＃每个都在模板中！

现在，这里是一个我们可以用来提供文本输入的视图。有一个外部容器视图，需要将valueBinding输入到实际的文本框。

  App.AutoTextField = Ember.ContainerView。 extension（{
 type：null，
 name：null，
 
 init：function（）{
 this._super（）; 
 this.createChildView （）; 
}，
 createChildView：function（）{
 this.set（'currentView'，Ember.TextField.create（{
 valueBinding：'controller。 .get（'name'），
 type：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屋！