How to dynamic update 2 templates simultaneously in emberjs

问题

in the folowing jsFiddle i have add a little example ember application. In the 'details' view i want to display information about the selected group and if i click on a device in a group, i want to replace the details with the device details. How can i manage this in ember way?

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

TEMPLATES

<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]
}];

回答1:

Is this what you wanted to acheive ?

Changes Made

I've changed the nesting

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

So that the routes would be something like /groups/:group_id/:device_id

Then I've removed the {{render}} helpers & added {{outlet}} in the templates

Changes in devices template, I am passing the device model to the controller, you were passing App.Detail

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

Changes in details template

Now that we have the entire model we can get the details using the details property

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

If you think I did not interpret your question properly, let me know, I'll update the answer accordingly

Update as per the comments: Fiddle

Only one detail(Final Solution)

The Fiddle

The changes required are

removing the {{template}} which was displaying group details & using a single {{outlet}} for both details.

adding redirection in GroupIndexRoute which redirects to display group details on clicking a group

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

来源：https://stackoverflow.com/questions/15833104/how-to-dynamic-update-2-templates-simultaneously-in-emberjs