Vì vậy, tôi có thiết lập sau đây.Cách tải partials/views/templates động trong Ember.js
Trên trang chính, danh sách các trình tạo đang được hiển thị dựa trên danh sách đến từ mô hình sử dụng dữ liệu lịch thi đấu.
Bây giờ khi một trong các liên kết máy phát được nhấp vào, một trang mới được hiển thị với một số trường nhập được tạo động dựa trên dữ liệu lịch thi đấu đó.
Cho đến thời điểm này mọi thứ hoạt động hoàn hảo.
Bây giờ khi tôi thay đổi giá trị của trường đầu vào trong trang máy phát (sau khi chọn một trong các trình tạo) để xem các thay đổi đang được cập nhật trong một số loại div xem trước ngay bên dưới trường nhập của tôi, thật dễ dàng. Tôi có thể sử dụng {{generatorFields.0.value}} để ràng buộc trường nhập đầu tiên, .1., V.v. cho đến khi tôi ràng buộc tất cả chúng. Tuy nhiên, như bạn có thể tưởng tượng, mỗi máy phát có định dạng riêng và các trường nhập riêng của nó, và tôi muốn tạo một tệp .hbs mới cho mỗi và mỗi một tệp và sau đó chuyển tệp đó vào trang trình tạo để hiển thị bản xem trước.
Tôi đã giải quyết được 0,1% vấn đề với một phần. Trong tệp generator.hbs tôi đã nhập {{partial "generator-1"}} và điều này tải tệp _generator-3.hbs của tôi có chứa liên kết {{generatorFields.0.value}} và nó hoạt động. Nhưng phần đó không phải là năng động; Tôi cần phải tải một phần khác nhau mỗi lần tôi sử dụng một máy phát điện khác nhau. Làm thế nào tôi có thể đạt được điều này?
Làm cách nào để chuyển một phần động hoặc tải mẫu dựa trên dữ liệu mô hình mà tôi có?
Mã được sử dụng cho đến nay là dưới đây:
idex.hbs trông như thế này:
<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"
}];
Bạn có thể tạo jsbin hoặc jsfiddle hiển thị sự cố không. – delwyn