如何在EmberJS的2.2路由器中使用动态段？ [英] How do I use dynamic segments in EmberJS' 2.2 router?

问题描述

我不知道如何在EmberJS的新路由器API中创建具有动态段的路由。我花了一个星期，尝试了许多事情，但它并没有奏效。我真的很沮丧，因为我经历过docs，API和源代码很多次，无法弄清楚如何使这项工作。我正在寻求帮助。

我正在尝试实现以下路线：

• / profile /：userId - > index


• / profile /：userId / activity - >活动页面


• / profile /：userId /。 ..

我的路由器设置如下

  App.Router.map（function（）{
 return this.resource（profile，function（）{
 this.route（index，{path：'/ ：userId'}）; 
 this.route（activity，{path：'/：userId / activity'}）; 
}）; 
}）; 
  

然后，每当我尝试链接到 linkTo helper，我收到以下错误：未捕获更多的对象被传递比动态段

 code>< li> {{linkToprofile.indexuser}}概述{{/ linkTo}}< / li> 
  

如果我不包括用户对象，然后我收到另一个错误未捕获错误：断言失败：不能在未定义的对象上使用'id'调用get （显然因为没有对象可以使用ID）

如果是任何帮助者，这里是我的路由声明

 应用程序.ProfileIndexRoute = Ember.Route.extend（{
 model：function（params）{
 return Ember.Object.create（{
 id：1 
}）; 
}，
 setupController：function（controller，model）{
 return controller.set（content，model）; 
} 
}）; 
 
 App.ProfileActivityRoute = Ember.Route.extend（{
 model：function（params）{
 return Ember.Object.create（{
 id：1 
}）; 
}，
 setupController：function（controller，model）{
 return controller.set（content，model）; 
} 
 }）; 
  

解决方案

JSBin示例

您可以使用更多的嵌套来构建您的路由，以获取URL你希望（你不需要在你的路由器中有一个return语句）：

  App.Router.map （）{
 this.resource（profile，function（）{
 this.resource（userprofile，{path：'/：userId'}，function（）{
 this .route（index，{path：'/'}）; 
 this.route（activity，{path：'/ activity'}）; 
}）; 
} ）; 
}）; 
  

然后设置您的路线：

  App.IndexRoute = Ember.Route.extend（{
 model：function（params）{
 return [Ember.Object.create（{
 id：1 
}）]; 
} 
}）; 
 
 App.UserprofileIndexRoute = Ember.Route.extend（{
 model：function（params）{
 console.log（userindex route，params）; 
返回Ember.Object.create（{
 id：1 
}）; 
}，
 setupController：function（controller，model）{
 return controller.set content，model）; 
} 
}）; 
 
 App.UserprofileActivityRoute = Ember.Route.extend（{
 model：function（params）{
 return Ember.Object.create（{
 id：1 
}）; 
}，
 setupController：function（controller，model）{
 return controller.set（content，model）; 
} 
 }）; 
  

您可以链接到 / profile / 1 页面：

  {{linkto userprofile.index user}} 
  pre> 
 
 
或链接到 / profile / 1 / activity 页面：
  {{linkto userprofile.activity user}} 
  
 
I can't figure out how to create routes with dynamic segments in the new router API for EmberJS. I've spent a week on it and tried many things but it doesn't work. I am really frustrated at myself because I've gone through the docs, API and source code many times and cannot figure out how to make this work. I am dying for assistance.

I am trying to achieve the following routes:


/profile/:userId -> index
/profile/:userId/activity -> activity page
/profile/:userId/...


My router is set up like this
App.Router.map(function() {
  return this.resource("profile", function() {
    this.route("index", { path: '/:userId' });
    this.route("activity", { path: '/:userId/activity' });
  });
});
Then, whenever I try to link with the linkTo helper, I receive the following error: Uncaught More objects were passed than dynamic segments
<li>{{#linkTo "profile.index" user}}overview{{/linkTo}}</li>
If I don't include the user object, then I receive another error Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object. (obviously because there's no object to take the ID of)

If it's any helper, here are my route declarations
App.ProfileIndexRoute = Ember.Route.extend({
  model: function(params) {
    return Ember.Object.create({
      id: 1
    });
  },
  setupController: function(controller, model) {
    return controller.set("content", model);
  }
});

App.ProfileActivityRoute = Ember.Route.extend({
  model: function(params) {
    return Ember.Object.create({
      id: 1
    });
  },
  setupController: function(controller, model) {
    return controller.set("content", model);
  }
});

解决方案
JSBin example

You can structure your routes with a little bit more nesting to get the URLs you desire (and you don't need to have a return statement in your router):
App.Router.map(function() {
  this.resource("profile", function() {
    this.resource("userprofile", { path: '/:userId' }, function() {
      this.route("index", { path: '/' });
      this.route("activity", { path: '/activity' });
    });
  });
});
and then set up your routes like this:
App.IndexRoute = Ember.Route.extend({
  model: function(params) {
    return [Ember.Object.create({
      id: 1
    })];
   }
});

App.UserprofileIndexRoute = Ember.Route.extend({
  model: function(params) {
    console.log("userindex route", params);
    return Ember.Object.create({
      id: 1
    });
  },
  setupController: function(controller, model) {
    return controller.set("content", model);
  }
});

App.UserprofileActivityRoute = Ember.Route.extend({
  model: function(params) {
    return Ember.Object.create({
      id: 1
    });
  },
  setupController: function(controller, model) {
    return controller.set("content", model);
  }
});
You can link to the /profile/1 page:
{{#linkTo userprofile.index user}}
or link to the /profile/1/activity page:
{{#linkTo userprofile.activity user}}


                        
这篇关于如何在EmberJS的2.2路由器中使用动态段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！