3

EmberJSでビューのコンテキストの属性を反復処理する方法はありますか？ORMにEmber-Data（https://github.com/emberjs/data）を使用しています。

connectOutletsを使用して、電子メール、名前などの属性を持つユーザーにUserViewを登録するとします。接続されたHandlebarsテンプレートで、これらの属性を反復処理できる方法はありますか？

基本的に、さまざまなモデルで再利用できる汎用ビューを作成する必要があります...

4

2 に答える 2

4

ライアンは属性については正しいですが、実際に目的の場所に到達するには、ある程度の作業が必要です。ここでの私の例は、最新のRC1Emberを使用しています。

モデルに依存しないエディターテンプレートは次のとおりです。

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

それを機能させるには、いくつかの魔法の魔法が必要です。このコントローラーは良いスタートです：

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

});

これは、ライアンが言及した「属性」プロパティを使用して、テンプレートの#eachにフィードするメタデータを提供します。

これが、テキスト入力を提供するために使用できるビューです。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')
});

これは、クレイジーなこと全体を示すフィドルです：http: //jsfiddle.net/Malkyne/m4bu6/

于 2013-02-24T15:17:35.470 に答える
2

モデルを表すEmberDataオブジェクトにattributesは、特定のモデルのすべての属性を含むプロパティがあります。これは、EmberDataがtoJSONモデルをJavascriptオブジェクトに変換するために使用するものです。

この属性プロパティを使用してモデルの属性を読み取り、それらの特定の属性をインスタンスから引き出すことができます。これが例です。

http://jsfiddle.net/BdUyU/1/

ここで何が起こっているのかを繰り返します。App.Userから属性を読み取り、App.ryanとApp.steveから値を引き出しています。これが理にかなっていることを願っています。

于 2012-09-14T01:33:44.477 に答える