だから私は次の設定をしています。
メイン ページでは、フィクスチャ データを使用したモデルからのリストに基づいて、ジェネレータのリストが表示されています。
ジェネレーター リンクの 1 つがクリックされると、そのフィクスチャ データに基づいて動的に生成されるいくつかの入力フィールドを含む新しいページが表示されます。
この時点まで、すべてが完全に機能します。
ジェネレーター ページで (ジェネレーターの 1 つを選択した後) 入力フィールドの値を変更して、入力フィールドのすぐ下にあるある種のプレビュー div で変更が更新されていることを確認すると、簡単です。{{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"
}];