9

だから私は次の設定をしています。

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

ジェネレーター リンクの 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"
}];
4

4 に答える 4

15

渡された名前を使用して{{partial}}ヘルパーでレンダリングする動的部分ヘルパーを作成できます。

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

{{dynPartial}}次に、代わりにこの動的パーシャルを使用します。

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

のジェネレーターtemplateNameの場合generator-1。これはパーシャルでレンダリングされます_generator-1。テンプレートの id/data-template-name の名前はアンダースコアで始まる必要があることに注意してください。

于 2013-07-16T14:31:16.993 に答える