Ember.jsで部分/ビュー/テンプレートを動的に読み込む方法

Question

以下の設定があります。

メインページでは、発電機のリストは、フィクスチャーデータを使用してモデルから来るリストに基づいて表示されています。

ここでジェネレータリンクの1つをクリックすると、そのフィクスチャデータに基づいて動的に生成されるいくつかの入力フィールドを持つ新しいページが表示されます。

これまではすべてが完全に機能します。

ここで、入力フィールドのすぐ下のプレビュー・ディビジョンの何らかの種類の更新で変更が表示されるように、ジェネレータ・ページの入力フィールドの値を変更したとき（ジェネレータの1つを選択した後）。 {{generatorFields.0.value}}を使用して、最初の入力フィールド、.1。などをバインドして、すべてをバインドするまで使用できます。

想像しているように、それぞれのジェネレータは独自のフォーマットと独自の入力フィールドを持っています。それぞれの.hbsファイルを作成し、そのファイルをジェネレータページに渡して表示しますプレビュー

私は部分的に問題の0.1％を解決しました。 generator.hbsファイルでは{{partial "generator-1"}}と入力し、_generator-3.hbsファイルには{{generatorFields.0.value}}バインドが含まれています。しかし、その部分は動的ではありません。私は、別のジェネレータを使うたびに異なる部分をロードする必要があります。どうすればこれを達成できますか？

私は部分的な名前を動的に渡すことができますか、または私が持っているモデルデータに基づいてテンプレートを読み込むことができますか？

これまでに使用したコードは以下の通りです：

idex.hbsは次のようになります。

<table class="table table-hover"> 
      <thead> 
       <tr> 
        <th>#</th> 
        <th>Generator name</th> 
        <th>Action</th> 
       </tr> 
      </thead> 
      <tbody> 
       {{#each model}} 
       <tr> 
        <td>{{id}}</td> 
        <td>{{title}}</td> 
        <td>{{#linkTo 'generator' this classNames="btn btn-mini pull-right"}}Create file{{/linkTo}}</td> 
       </tr> 
       {{/each}} 
       </tbody> 
     </table> 

generator.hbs

{{#each generatorFields}} 
<div class="row-fluid"> 
    <div class="span4">{{name}}</div> 
    <div class="span8">{{view Ember.TextField valueBinding='value' class='span12' placeholder='Type value here…'}}</div> 
</div> 
{{/each}} 

{{partial "generator-1"}} 

_generator-1.hbs

<h1>Project: {{generatorFields.0.value}}</h1> 

app.js

App.Store = DS.Store.extend({ 
    revision: 13, 
    adapter: 'DS.FixtureAdapter' 
}); 

App.Router.map(function() { 
    this.resource('index', { path: '/' }); 
    this.resource('generator', {path: '/generator/:generator_id'}); 
}); 

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
     return App.Generator.find(); 
    } 
}); 

App.Generator = DS.Model.extend({ 
    title: DS.attr('string'), 
    templateName: DS.attr('string'), 
    generatorFields: DS.attr('generatorFields') 
}); 


// Fixture data 

DS.RESTAdapter.registerTransform('generatorFields', { 
    serialize: function(serialized) { 
     return Em.none(serialized) ? {} : serialized; 
    }, 
    deserialize: function(deserialized) { 
     return Em.none(deserialized) ? {} : deserialized; 
    } 
}); 

App.Generator.FIXTURES = [{ 
    id: 1, 
    title: "test 1", 
    generatorFields: [ 
     {id: 1, name: "name 1", value: ""} 
    ], 
    templateName: "generator-1" 
}, { 
    id: 2, 
    title: "test 2", 
    generatorFields: [ 
     {id: 1, name: "name 1", value: ""}, 
     {id: 2, name: "name 2", value: ""}, 
    ], 
    templateName: "generator-2" 
}]; 

Answer 1

あなたは{{partial}}ヘルパーでレンダリングするには、名前で渡される使用する動的部分のヘルパーを作成することができます。

Ember.Handlebars.helper('dynPartial', function(name, options) { 
    return Ember.Handlebars.helpers.partial.apply(this, arguments); 
}); 

代わりに、この動的部分{{dynPartial}}を使用してください。 generator-1のtemplateNameと発電用

{{#each item in controller}} 
    {{dynPartial item.templateName}} 
{{/each}} 

。これは部分的に_generator-1と表示されます。テンプレートのid/data-template-nameの名前は、アンダースコアで始まる必要があります。

Answer 2

動的パーシャル変数を部分ヘルパー内に配置するだけで済みます。あなたはそれが部分的_generator-1をレンダリングするでしょうgenerator-1のtemplateNameで発電機を持っている場合は、@ダルシャン-sawardekarとして

{{#each item in controller}} 
    {{partial item.templateName}} 
{{/each}} 

は指摘しました。

Answer 3

@ダルシャン氏の回答は以下のものよりも簡単で多くの場合有効ですが、別のモデルで同じルートに移行すると、2番目のモデルの部分名最初のものと同じです（エバーのバグ？）。モデルを監視するビューを設定すると、これが修正されます。

App.FooDynamicLayout = Ember.View.extend 
    rerenderOnModelChange: (-> 
    @rerender() 
).observes('model') 

し、それを呼び出す：

view App.FooDynamicLayout templateName=dynamicTemplateName model=model 

Answer 4

@KamrenZはすでにこれを述べたが、私はこれにお探しの方に章や詩を引用したい考え出し。 Ember社の最近のバージョン優雅バウンドプロパティ名を受け入れ、一部のヘルパーでそれらを使用します。

http://ember-doc.com/classes/Ember.Handlebars.helpers.html#method_partial

BOUNDテンプレート名は、部分的に供給されたパラメータは、テンプレート名を含むプロパティに パスすることができ例えば：

{{partial someTemplateName}} 

上記の例ではにsomeTemplateNameの値を検索しますテンプレートのコンテキスト（例：コントローラー）、その値を の名前として使用してレンダリングします。解決された値が偽であれば、何も表示されません。 someTemplateNameが変更された場合、部分テンプレートは新しいテンプレート名を使用して に再レンダリングされます。