2

私のEmber.jsアプリケーションには、次のような単純なビューがあります。各「content」要素は、1番目と2番目の2つのオブジェクトで構成されています。

{{#each App.myController.content}}
    {{view for content.first}}
    {{view for content.second}}
{{/each}}

別のハンドルバーテンプレートスクリプトで、各コンテンツのビューを個別に定義したいと思います（2回書き込む必要がないように）。1番目と2番目の変数をビューに渡すにはどうすればよいですか？

これがコードサンプルです。http ：//jsfiddle.net/Zm4Xg/5/を参照してください。

ハンドルバー：

<script type="text/x-handlebars" data-template-name="contact-view">
     <div>{{name}}</div>
     <img {{bindAttr src="avatar"}} {{bindAttr alt="name"}}>
</script>

<script type="text/x-handlebars">
  {{#each App.contactsController.pair}}
    <div class="menu_vertical_group">
      {{#with this.first}}
         {{view App.contactView}}
      {{/with}}

      {{#with this.second}}
         {{view App.contactView}}
      {{/with}}

    </div>
  {{/each}}
</script>

JavaScript：

App = Ember.Application.create();

App.Contact = Em.Object.extend({
    name: null,
    avatar: null
});

App.contactView = Ember.View.extend({
    templateName: 'contact-view'
});

App.contactsController = Em.ArrayController.create({
    content: [],
    initData: function(data) {
        var contacts = data.map(function(contact) {
            return App.Contact.create({
                "name": contact.name,
                "avatar": contact.avatar
            });
        });
        this.pushObjects(contacts);
    },

    pair: (function() {
        content = this.get('content');
        var result = [];
        for (ii = 0; ii < content.length; ii += 2) {
            result.pushObject({
                "first": content[ii],
                "second": content[ii + 1] ? content[ii + 1] : null
            });
        }
        return result;
    }).property('content')
});

App.contactsController.initData([{
    "name": "John Doe",
    "avatar": "/john.jpg"},
{
    "name": "Someone Else",
    "avatar": "/else.jpg"}]);​
4

2 に答える 2

5

このようなもの？

{{#each App.myController.content}}
    {{view MyView contentBinding="content.first"}}
    {{view MyView contentBinding="content.second"}}
{{/each}}
于 2012-07-17T10:34:13.777 に答える
2

次のように、モデルのプロパティに基づいて別のビューに評価されるtemplateName関数を使用してViewクラスを拡張できます。

App.customView = Ember.View.extend({
    templateName:function(){     
          if(this.get('content').get('index') === 1){
            return 'view1';
          }
          else{
            return 'view2';                               
          }
    }.property('content.index') // custom template function based on 'index' property
});

このフィドルをチェックしてください：http：//jsfiddle.net/lifeinafolder/7hnc9/

于 2012-07-17T09:31:50.357 に答える