Question

我正在尝试构建一个智能家居应用程序，我仍然坚持使用多个参数调用嵌套路由。我想显示用户登录的信息以及在我的父路线中的模板下面我希望呈现子页面以显示住户的信息。选择特定的家庭后，我想显示家庭中的房间，然后显示设备。这是我的router.js

<?xml version="1.0" encoding="UTF-8"?>
<wls:weblogic-application xmlns:wls="http://xmlns.oracle.com/weblogic/weblogic-application" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/javaee_5.xsd http://xmlns.oracle.com/weblogic/weblogic-application http://xmlns.oracle.com/weblogic/weblogic-application/1.5/weblogic-application.xsd">
   <wls:prefer-application-packages>    
       <!-- logging -->
       <wls:package-name>org.slf4j.*</wls:package-name>
       <wls:package-name>org.jboss.logging.*</wls:package-name>             
   </wls:prefer-application-packages>
   <wls:prefer-application-resources>
        <wls:resource-name>org/slf4j/impl/StaticLoggerBinder.class</wls:resource-name>
    </wls:prefer-application-resources>     
</wls:weblogic-application>

我链接到这样的家庭

    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;

现在我想在households.js的路由中声明一个模型，该模型从ember数据存储返回一个用户并呈现父模板。之后，模型应该使用user.id重定向到households.index，而households.index.hbs应该将所有住户渲染到父模板下面。我的households.js路线看起来像这样：

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

和我的household.index这样的路线

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

实际上会发生以下错误：

错误：断言失败：你试图定义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; })); } });，但没有传递生成动态段所需的参数。您必须向{{link-to "households.rooms"}}提供参数user_id。

一般情况下，我需要在所有嵌套路由/子路由中使用多个参数，因为我需要在路由设备中使用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中获取它们（即用户model()的{{1}}），以及单个记录不< / strong>在索引中，但在单routes/users/index.js（即route.js model()中的单个家庭）中，使索引路径和子路径都可以访问该模型

因此，使用此配置，您的链接应如下所示：

routes/users/single/households/single.js

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

// 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}}

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

// 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 2.17中使用带有多个参数的嵌套路由

1 个答案: