如何在Ember.js中动态加载partials / views / templates [英] How to load partials / views / templates dynamically in Ember.js
问题描述
所以我有以下设置。
在主页上，根据使用夹具数据的模型列表显示生成器列表。 / p>
现在，当其中一个生成器链接被点击时，将显示一个新页面，其中包含一些基于该夹具数据动态生成的输入字段。
直到这一点，一切都很完美。
现在，当我更改生成器页面中的输入字段的值（在选择其中一个生成器之后）看到更改在某些预览div正好在我的输入字段下方更新，这很容易。我可以使用 {{generatorFields.0.value}} 绑定第一个输入字段.1。等等，直到我绑定所有这些。
但是您可以想像，每个生成器都有自己的格式和自己的输入字段，并且我想为它们中的每一个创建一个新的.hbs文件，然后通过文件进入生成器页面以显示预览。
我解决了部分问题的0.1％。在generator.hbs文件中，我输入了 {{partialgenerator-1}} ，并加载了我的 _generator-3.hbs 文件包含 {{generatorFields.0.value}} 绑定，它的工作原理。但是那部分不是动态的;每次使用不同的发电机时，我需要加载不同的部件。如何实现？
如何动态传递部分名称或根据我拥有的模型数据加载模板？
到目前为止使用的代码如下：
idex.hbs如下所示：
< table class =table table-hover>
< thead>
< tr>
< th>＃< / th>
< th>生成器名称< / th>
<动作< / th>
< / tr>
< / thead>
< tbody>
{{#each model}}
< tr>
< td> {{id}}< / td>
< td> {{title}}< / td>
< td> {{linkTo'generator'这个classNames =btn btn-mini pull-right}}创建文件{{/ 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 ='在此处输入值...}}< / div>
< / div>
{{/ each}}
{{partialgenerator-1}}
_generator-1.hbs
< h1>项目：{ {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）{
返回Em.none（序列化）？{}：序列化;
}，
反序列化：function（deserialized）{
return Em.none（deserialized）？{}：deserialized;
}
}）;
App.Generator.FIXTURES = [{
id：1，
标题：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
}];
您可以创建一个动态部分助手，以 {{partial}} 帮助者呈现的名称。
Ember.Handlebars.helper（'dynPartial'，function（name，options）{
return Ember.Handlebars.helpers.partial.apply（this，arguments）;
}）;
然后使用这个动态部分， {{dynPartial}}
{{＃控制器中的每个项目}}
{{dynPartial item.templateName}}
{{/ each}}
对于具有 templateName的生成器 generator-1 。这将使用部分 _generator-1 呈现。请注意，模板的id / data-template-name的名称必须以下划线开头。
So I have the following setup.
On the main page, a list of generators is being displayed based on a list coming from a model using fixture data.
Now when one of the generator links is clicked, a new page is shown with some input fields that are dynamically generated based on that fixture data.
Until this point everything works perfectly.
Now when I change the input field's value in the generator page (after selecting one of the generators) to see the changes being updated in some sort of a preview div just below my input fields, it is easy. I can use {{generatorFields.0.value}} to bind the first input field, .1., and so on until I bind all of them.
But as you can imagine, each generator has its own format and its own input fields, and I want to create a new .hbs file for each and every one of them and then pass that file into the generator page to show the preview.
I solved 0.1% of the problem with a partial. In the generator.hbs file I entered {{partial "generator-1"}} and this loads my _generator-3.hbs file that contains that {{generatorFields.0.value}} bind, and it works. But that partial is not dynamic; I need to load a different partial each time I use a different generator. How can I achieve this?
How can I pass the partial name dynamically or load a template based on the model data that I have?
The code used so far is below:
idex.hbs looks like this:
<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"
}];
You can create a dynamic partial helper that uses the passed in name to render with the {{partial}} helper.
Ember.Handlebars.helper('dynPartial', function(name, options) {
return Ember.Handlebars.helpers.partial.apply(this, arguments);
});
Then use this dynamic partial, {{dynPartial}} instead.
{{#each item in controller}}
{{dynPartial item.templateName}}
{{/each}}
For a generator with templateName of generator-1. This would render with the partial _generator-1. Note that the name of the template's id/data-template-name must begin with an underscore.
这篇关于如何在Ember.js中动态加载partials / views / templates的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
