Javascript 如何在ember 2.17中使用带多个参数的嵌套管线
我正在尝试构建一个smarthome应用程序,我一直在使用服务器参数调用嵌套路由。我想显示用户登录的信息,并在我的父路由中的模板下方显示我想显示家庭的子页面。在选择了一个特定的家庭之后,我想显示家庭中的房间,然后显示设备。这是我的路由器Javascript 如何在ember 2.17中使用带多个参数的嵌套管线,javascript,ember.js,ember-data,frontend,ember-cli,Javascript,Ember.js,Ember Data,Frontend,Ember Cli,我正在尝试构建一个smarthome应用程序,我一直在使用服务器参数调用嵌套路由。我想显示用户登录的信息,并在我的父路由中的模板下方显示我想显示家庭的子页面。在选择了一个特定的家庭之后,我想显示家庭中的房间,然后显示设备。这是我的路由器 Router.map(function() { this.route('about'); this.route('users', function() { }); this.route('household
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;
我链接到这样的家庭
<h3>{{#link-to "households" user.id}}{{user.surname}}{{/link-to}}</h3>
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;
}));
}
});
还有我的家人,就像这样
<h3>{{#link-to "households" user.id}}{{user.surname}}{{/link-to}}</h3>
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;
}));
}
});
实际上发生了以下错误:
错误:断言失败:您
试图定义{{指向“houses.rooms”的链接}
,但未定义
传递生成其动态段所需的参数。你
必须提供参数用户id
以生成
通常,我需要所有嵌套路由/子例程中的服务器参数,因为我需要用户id,例如路由设备中的用户id,以检查调用用户是否是管理员。如果他是管理员,他将能够添加和编辑设备。我需要房间id仅显示所选房间中的设备
是否有任何方法可以传递服务器参数或以我可以处理我的目的的方式使用控制器?据我所知,您没有很好地设置路由层次结构 假设您有多个用户,每个用户都有多个家庭,每个家庭都有多个房间,我建议您将您的
router.js
如下所示:
export default Route.extend({
model(params){
{
return this.get('store').findRecord('user', params.user_id);
}
}
});
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
});
});
});
});
});
});
// 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')
});
{{#link-to 'users.single' model.household.user}}Go to user{{/link-to}}
请随意省略这个.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
注意:确保正确指定模型及其关系,从一开始就让您的生活更轻松。因此,对于本答案开头假设的配置,您应该使您的模型如下所示:
export default Route.extend({
model(params){
{
return this.get('store').findRecord('user', params.user_id);
}
}
});
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
});
});
});
});
});
});
// 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')
});
{{#link-to 'users.single' model.household.user}}Go to user{{/link-to}}
如果您像这样组织模型,那么Ember将允许您从房间页面(路线)链接到用户页面,如下所示:
export default Route.extend({
model(params){
{
return this.get('store').findRecord('user', params.user_id);
}
}
});
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
});
});
});
});
});
});
// 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')
});
{{#link-to 'users.single' model.household.user}}Go to user{{/link-to}}
非常感谢。我试图构建您的示例,但与单个用户的家庭的链接不起作用,因为用户id未定义。我的起始页面得到了url,当我点击我的链接时,它会被重定向到,并且传递的用户id在我的模型钩子中没有定义。你知道我如何解决这个问题吗?好吧,现在它将我重定向到localhost:4200/users/131000/houses,正如你所说的,但我仍然有一个未定义的参数。现在如何访问131000?您可以访问任何路线的模型(params)
挂钩内的所有参数。这意味着,在用户的子路由中,您可以访问params.user_id
,从那里开始,您可以确保您的模型可以访问它。因此,如果您访问路由localhost:4200/users/131000/houses
,它的model()
钩子将接收params
,其中将包含user\u id
。很好!非常感谢你!