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

Question

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

这就是我想要实现的目标：

我认为这被称为 Master-Detail 页面。

更系统地看起来像这样：

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

我使用的是 ember-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}}

routes/users/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 ---