Question

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

模板

<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

this你想要实现的目标是什么？

所做的更改

我已经改变了嵌套

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}}帮手＆amp;在模板中添加了{{outlet}}

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

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

details模板中的更改

现在我们拥有整个模型，我们可以使用details属性

获取详细信息

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

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

根据评论更新： Fiddle

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

The Fiddle

所需的更改是

删除显示群组详情的{{template}}＆amp;使用单个{{outlet}}来获取两个细节。

在GroupIndexRoute中添加重定向，重定向到单击组

时显示组详细信息

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

如何在emberjs中同时动态更新2个模板

1 个答案:

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