Question

我无法弄清楚如何在EmberJS的新路由器API中创建具有动态段的路由。我花了一个星期的时间来尝试很多东西，但它不起作用。我对自己感到非常沮丧，因为我已多次浏览文档，API和源代码，无法弄清楚如何使这项工作。我渴望得到帮助。

我正在努力实现以下路线：

/ profile /：userId - ＆gt;索引
/ profile /：userId / activity - ＆gt;活动页面
/简档/：用户id /...

我的路由器设置如下

App.Router.map(function() {
  return this.resource("profile", function() {
    this.route("index", { path: '/:userId' });
    this.route("activity", { path: '/:userId/activity' });
  });
});

然后，每当我尝试与linkTo帮助器链接时，都会收到以下错误：Uncaught More objects were passed than dynamic segments

<li>{{#linkTo "profile.index" user}}overview{{/linkTo}}</li>

如果我不包含user对象，那么我会收到另一个错误Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object.（显然因为没有对象可以获取ID）

如果是帮助者，这是我的路线声明

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

Answer 1

JSBin example

您可以通过更多嵌套来构建路径以获取所需的URL（并且您不需要在路由器中使用return语句）：

App.Router.map(function() {
  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);
    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);
  }
});

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

{{#linkTo userprofile.index user}}

或链接到/profile/1/activity页面：

{{#linkTo userprofile.activity user}}

如何在EmberJS＆＃39;中使用动态片段？ 2.2路由器？

1 个答案: