Ember.jsを使用してモデルタイプ/オブジェクト値でビューテンプレートを選択

Question

同じコントローラのコンテンツ配列に異なるオブジェクトを保存し、適切なビューテンプレートを使用してそれぞれをレンダリングしたいと思いますが理想的には同じビューです。

以下のコードを使用してリストオブジェクトを出力しています。彼らは現在同じですが、私は別のものを使用できるようにしたいと思います。

<script type="text/x-handlebars"> 
    {{#each App.simpleRowController}} 
    {{view App.SimpleRowView class="simple-row" contentBinding="this"}} 
    {{/each}} 
</script> 

ビューのカットダウンバージョンは以下のとおりです。私が含まれていない他の機能は、モデルに関係なく、オブジェクトのいずれかで使用できます。だから私は理想的には1つのビューを持っているだろうが（ミックスインに関する記事を読んだことがあるが、そうでないと助けになるかもしれない）。

<script> 
    App.SimpleRowView = Em.View.extend({ 
    templateName: 'simple-row-preview', 
    }); 
</script> 

私の最初のいくつかのテスト異なるオブジェクトタイプを可能に「シンプル・行・プレビュー」内の条件の負荷になってしまった - それはひどい見えました！

コンテンツの配列を反復処理する際に使用されるtemplateNameまたはビューを動的に制御する方法はありますか？ 2人の回答者へ

UPDATE

どうもありがとうございましたが。ビューで使用される最終コードは以下のとおりです。私のモデルの中には、似ているものがあり、私のアプリケーションでテンプレート（またはある種の「状態」）を切り替えることができるという考えが好きでした。

<script> 
    App.SimpleRowView = Em.View.extend({ 
    templateName: function() { 
     return Em.getPath(this, 'content.template'); 
    }.property('content.template').cacheable(), 
    _templateChanged: function() { 
     this.rerender(); 
    }.observes('templateName'), 
    // etc. 
    }); 
</script> 

Answer 1

templateNameをプロパティにしてから、コンテンツに基づいて使用するテンプレートを決めることができます。たとえば、これはオブジェクトのタイプに基づいてテンプレートを設定するには、instanceofはを使用しています

：

App.ItemView = Ember.View.extend({ 
    templateName: function() { 
     if (this.get("content") instanceof App.Foo) { 
      return "foo-item"; 
     } else { 
      return "bar-item"; 
     } 
    }.property().cacheable() 
}); 

ここでは上記の実施例とフィドルです：のソリューションに基づいてhttp://jsfiddle.net/rlivsey/QWR6V/

Answer 2

@ rlivsey、私はプロパティの変更は、これは非常に良い答えですが、残念ながらhttp://jsfiddle.net/pangratz666/ux7Qa/

App.ItemView = Ember.View.extend({ 
    templateName: function() { 
     var name = Ember.getPath(this, 'content.name'); 
     return (name.indexOf('foo') !== -1) ? 'foo-item' : 'bar-item'; 
    }.property('content.name').cacheable(), 

    _templateChanged: function() { 
     this.rerender(); 
    }.observes('templateName') 
});