9

所以我有以下设置。

在主页上，根据来自使用夹具数据的模型的列表显示生成器列表。

现在，当单击其中一个生成器链接时，将显示一个新页面，其中包含一些基于该夹具数据动态生成的输入字段。

到此为止，一切正常。

现在，当我在生成器页面中更改输入字段的值（在选择其中一个生成器之后）以查看在我的输入字段下方的某种预览 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>

生成器.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>

应用程序.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 回答
5

您应该能够简单地将动态部分变量放在部分帮助器中。

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

正如@darshan-sawadekar 指出的那样，如果你有一个带有它的生成器templateName，generator-1它会渲染部分_generator-1.

于 2014-02-05T16:36:19.063 回答
1

虽然@Darshan 的答案比下面的简单，并且在许多情况下都可以使用，但我只是遇到了一个问题，即如果第二个模型的部分名称与第一个（余烬中的错误？）。设置一个观察模型的视图可以解决这个问题。

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

并调用它：

view App.FooDynamicLayout templateName=dynamicTemplateName model=model
于 2014-02-25T00:25:20.943 回答
0

@KamrenZ 已经提到了这一点，但我想我会为那些研究这个的人引用章节和诗句。最新版本的 Ember 优雅地接受绑定的属性名称并在部分帮助器中使用它们：

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

绑定模板名称 提供给 partial 的参数也可以是包含模板名称的属性的路径，例如：

{{partial someTemplateName}}

上面的示例将在模板上下文（例如控制器）上查找 someTemplateName 的值，并将该值用作要呈现的模板的名称。如果解析的值是虚假的，则不会呈现任何内容。如果 someTemplateName 更改，部分将使用新的模板名称重新渲染。

于 2016-02-20T16:21:21.220 回答