ember.js - 如何在emberjs中同时动态更新2个模板

Question

在下面的 jsFiddle 中，我添加了一个小示例 ember 应用程序。在“详细信息”视图中，我想显示有关所选组的信息，如果我单击组中的设备，我想用设备详细信息替换详细信息。我如何以 ember 方式管理这个？

http://jsfiddle.net/theremin/qGCe6/1/

模板

<script type="text/x-handlebars" data-template-name="application">
    <h2>SampleApp</h2>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="groups">

    <div>
        <h3>Groups</h3>             
<div style="">
            <ul>
            {{#each controller}}
                <li>{{#linkTo "devices" devices}}{{name}}{{/linkTo}}</li>
            {{/each}}
            </ul>
        </div>
    </div>
    <div>
        {{render 'devices'}}
    </div>
    <div>
        {{render 'details'}}
    </div>
</script>    

<script type="text/x-handlebars" data-template-name="devices">

    <h3>Devices</h3>
    <div>
        <ul>
        {{#each model}}
            <li>{{#linkTo "details" App.Device}}{{name}}{{/linkTo}}</li>
        {{/each}}
        </ul>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="details">
    <h3>Details for:</h3> 
    <div>
        <i>{{model}}</i>
    </div>
</script>

JAVASCRIPT

App = Ember.Application.create({});

App.Store = DS.Store.extend({
    revision    : 12,
    adapter     : 'DS.FixtureAdapter'
});

App.Router.map( function() {
    this.resource('groups', function() {
        this.resource('devices', { path: "/:group_id" });
        this.resource('details', { path: "/:device_id" });
    });
});

/**
 * ROUTES
 */
App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('groups');
    }
});

App.GroupsRoute = Ember.Route.extend({
    model       :   function( ){
        //console.log("--->", App.Group.find());
        return App.Group.find();
    }
});

/*App.DetailsRoute = Ember.Route.extend({
    model : function(){
        return this.modelFor("details");
    }
});*/

/**
 * MODELS
 */
App.Group = DS.Model.extend({
    name: DS.attr('string'),
    details: DS.attr('string'),
    devices: DS.hasMany('App.Device')
});

App.Device = DS.Model.extend({
    name: DS.attr('string'),
    details: DS.attr('string'),
    groups: DS.hasMany('App.Group')
});

/**
 * FIXTURES
 */

App.Group.FIXTURES = [{
    id:1,
    name:"Group one",
    details:"details for Group one",
    devices:[1,2]

},{
    id:2,
    name:"Group two",
    details:"details for Group two",
    devices:[2]
}];

App.Device.FIXTURES = [{
    id:1,
    name:"Device1",
    details:"details for Device1",
    groups: [1]

},{
    id:2,
    name:"Device2",
    details:"details for Device2",
    groups:[2]
}];

Answer 1

这是你想要实现的吗？

所做的更改

我改变了嵌套

App.Router.map( function() {
    this.resource('groups', function() {
        this.resource('devices', { path: "/:group_id" }, function(){
            this.resource('details', { path: "/:device_id" });
        });
    });
});

这样路线就会像/groups/:group_id/:device_id

然后我删除了{{render}}助手并添加{{outlet}}到模板中

模板更改devices，我将device模型传递给控制器​​，您正在传递App.Detail

{{#each device in model}}
    <li>{{#linkTo "details" device}}{{device.name}}{{/linkTo}}</li>
{{/each}}

details模板的变化

现在我们有了整个模型，我们可以使用details属性获取详细信息

<i>{{model.details}}</i>

如果您认为我没有正确解释您的问题，请告诉我，我会相应地更新答案

根据评论更新： 小提琴

只有一个细节（最终解决方案）

小提琴

所需的更改是

删除{{template}}显示组详细信息并使用单个显示组详细{{outlet}}信息。

添加重定向，GroupIndexRoute其中重定向以在单击组时显示组详细信息

App.GroupIndexRoute = Ember.Route.extend({
  redirect: function(){
    var model = this.controllerFor('group').get('model');
    this.transitionTo('detail',model);
  }
});