如何在Ember.js中使用嵌套路由

Question

我是Ember.js的新手，我坚持使用嵌套路由，我需要帮助。

这就是我想要达到的目标：

我想，这就是所谓的主从页面。

更系统，它看起来是这样的：

UsersIndexRoute的人显示列表。 UsersShowRoute显示特定人员的信息。

这里是我的路线：

Router.map(function() { 
    this.route('users', { path: '/users'}, function() { 
    this.route('index', { path: ''}, function() { 
     this.route('show', { path: '/:id' }); 
    }); 
    }); 
}); 

UserIndex模板看起来是这样的：

{{#each item in model}} 
    {{#link-to 'users.index.show' item.id}} {{item.firstName}} {{item.lastName}}{{/link-to}} 
{{/each}} 

当我尝试使用 'http://localhost:4200/users/1' 例如，URL根据调试我能够到达控制器'users.index.show'（所需的）

为UserShowRoute的路线是这样的：

export default Ember.Route.extend({ 
    renderTemplate: function() { 
    this.render({ 
     outlet: 'detail' 
    }); 
    }, 
    model: function(params) { 
    return this.store.find('user', params.id); 
    } 
}); 

我使用烬-CLI 1.13.8

我希望我的解释有一定的道理给你。 在此先感谢。

Answer 1

好吧，我更新了你的代码。主要是路由本身的逻辑。此外，每个循环都以不推荐的方式使用。

router.js

this.resource('users', function() { 
    this.route('index'); 
    this.route('view', { path: 'view/:id' }); 
}); 

路由/用户/索引

export default Ember.Route.extend({ 
    model: function() { 
     return this.store.find('user'); 
    } 
}); 

模板/用户/索引

{{#each model as |item|}} 
    {{#link-to 'users.view' item.id}} 
     {{item.firstName}} {{item.lastName}} 
    {{/link-to}} 
{{/each}} 

路线/用户/ view.js

export default Ember.Route.extend({ 

    model: function(params) { 
    return Ember.RSVP.hash ({ 
     person: this.store.find('user', params.id); 
    }) 
    } 
}); 

模板/用户/ view.hbs

{{model.person.firstName}} 

    ---- content ---