如何在 ember 2.17 中使用带有多个参数的嵌套路由

Question

我正在尝试构建一个 smarthome 应用程序，但我一直坚持使用多个参数调用嵌套路由。我想显示哪个用户已登录的信息，在我的父路由中的模板下方，我想呈现子页面以显示家庭。选择特定家庭后，我想展示家庭中的房间，然后是设备。这是我的 router.js

    Router.map(function() {
      this.route('about');
      this.route('users', function() {
      });
      this.route('households', { path: '/:user_id' }, function() {
        this.route('index', { path: '/:user_id' })
        this.route('rooms',{ path: '/:household_id' });
        this.route('devices', { path: '/:room_id' });
      });
    });

export default Router;

我link这样的家庭

  <h3>{{#link-to "households" user.id}}{{user.surname}}{{/link-to}}</h3>

现在我想在 households.js 的路由中声明一个模型，其中 returns 一个来自 ember 数据存储的用户并呈现父模板。之后，模型也应该使用 user.id 重定向到 households.index，并且 households.index.hbs 应该呈现父模板下的所有家庭。我的 households.js 路线如下所示：

export default Route.extend({
  model(params){
    {
      return this.get('store').findRecord('user', params.user_id);
    }
  }
});

我的household.index路线是这样的

export default Route.extend({
    model(params) {
       return this.get('store').findAll('household').then(results => results.filter((site) => {
           return site.get('member').filter(x => x == params.user_id).length > 0;
       }));
      }
});

实际出现以下错误：

Error: Assertion Failed: You attempted to define a {{link-to "households.rooms"}} but did not pass the parameters required for generating its dynamic segments. You must provide param user_id to generate.

通常我需要在所有嵌套 routes/subroutes 中使用几个参数，因为我需要 user_id 例如在路由设备中用于检查调用用户是否是管理员。如果他是管理员，他将能够添加和编辑设备。我需要 room_id 来仅显示所选房间中的设备。

有什么方法可以传递多个参数或以某种方式使用控制器，我可以满足我的目的吗？

Answer 1

据我了解，您没有很好地设置路由层次结构。

假设你有多个用户，每个用户有多个家庭，每个家庭有多个房间，我建议你router.js这样：

Router.map(function() {
  this.route('about');
  this.route('users', function() {
    this.route('index'); // Lists all the users, URL looks like /users
    this.route('single', { path: '/:user_id' }, function() {
      this.route('index'); // Shows a single user, URL looks like /users/123
      this.route('households', function() {
        this.route('index'); // Shows all households a user with user_id has, URL looks like /users/123/households
        this.route('single',{ path: '/:household_id' }, function() {
          this.route('index'); // Shows a single household, URL looks like /users/123/households/456
          this.route('rooms', function() {
            this.route('index'); // Shows all rooms a household with household_id has, URL looks like /users/123/households/456/rooms
            this.route('single', { path: '/:room_id' }); // Shows a single room, URL looks like /users/123/households/456/rooms/789
          });
        });
      });
    });
  });
});

如果您愿意，可以随意省略路由器中的 this.route('index'); 行，但请确保您创建了一个路由来处理此问题。您的模板应如下所示。

// templates/users.hbs

{{outlet}}


// templates/users/index.hbs

<h1>This shows all the users</h1>

<ul>
{{#each model as |user|}}
  <li>{{user.name}}</li>
{{/each}}
</ul>


// templates/users/single.hbs

{{outlet}}


// templates/users/single/index.hbs

<h1>This shows a single user with id {{model.id}}</h1>

<p>This is the user named {{model.name}}.</p>


// templates/users/single/households.hbs

{{outlet}}


// ... And so on

您应该以这样的方式实现 model() 挂钩，以便它们仅获取您真正需要的内容。对于列表，您可以在要显示的类型的索引 route.js 中获取它们（即用户 routes/users/index.js 的 model()），对于单个记录不是在索引中，而是在单个 route.js 中（即对于 routes/users/single/households/single.js 的 model() 中的单个家庭），以使索引路径和子路线。

因此，使用此配置，您的 link 应该如下所示：

// All users
{{#link-to 'users'}}All users{{/link-to}}

// Single user
{{#link-to 'users.single' user.id}}{{user.name}}{{/link-to}}

// Households of a single user
{{#link-to 'users.single.households' user.id}}All households of {{user.name}}{{/link-to}}

// Specific household of a single user
{{#link-to 'users.single.households.single' user.id household.id}}Household {{household.name}} of {{user.name}}{{/link-to}}

// Rooms within a specific household
{{#link-to 'users.single.households.single.rooms' user.id household.id}}All rooms within household {{household.name}} of {{user.name}}{{/link-to}}

注意：确保正确指定模型及其关系，让您的生活从一开始就更轻松。因此，对于此答案开头假设的配置，您应该使您的模型像这样：

// models/user.js

import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr('string'),

    households: DS.hasMany('household')
});


// models/household.js

import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr('string'),

    user: DS.belongsTo('user'),
    rooms: DS.hasMany('room')
});


// models/room.js

import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr('string'),

    household: DS.belongsTo('household')
});

如果您像这样组织模型，那么 Ember 会让您 link 从房间页面（路线）到用户页面，如下所示：

{{#link-to 'users.single' model.household.user}}Go to user{{/link-to}}

如何在 ember 2.17 中使用带有多个参数的嵌套路由

How to use nested routes with several parameters in ember 2.17

javascript

ember.js

ember-data

frontend

ember-cli