在Ember 3.15(辛烷)上
我正在尝试在应用程序中创建以下路径
/cars
/cars/:car_id
/cars/:car_id/:model_id
前两个很好,我已经能够使用ember-cli
创建它们了
ember g route cars
ember g route cars/car
第三个问题是,我需要将model
模板显示在cars
模板下,即替换car
模板。因此,如果我将{{outlet}}
放在car
模板上,则model
模板在其中呈现良好,但显然,使用{{outlet}}
时,当我导航到/cars/5/2
时,没有任何React
我的路由器看起来像这样
Router.map(function() {
this.route('cars', function(){
this.route('car', { path: ':car_id'}, function() {
this.route('model', { path: ':model_id' });
});
});
});
我尝试过使用索引路由ember g route cars/car/index
,但问题是params
在index
路由中不可用,只能在car
路由中访问。
作为计划B,我已经将汽车和模型路径创建为顶级路径(based on this answer),但由于以下几个原因,我希望实现上述目标
- 它看起来更符合逻辑,即基于路线的嵌套来构建应用程序
- 我有许多嵌套路由,将它们全部创建为一级路由将变得难以维护
- ember在这种配置下不能正确应用
active
类。例如,如果我有一个链接为Cars
的导航栏,我希望它在所有三个页面上都有 active 样式。但这不再起作用,因为第二个路径将被称为car
,第三个路径将被称为model
。 - 使用
<LinkTo />
默认创建的URL存在一些问题。
如果我的car
模板中有这样的内容
<ul>
{{#each @model.models as |model|}}
<li><LinkTo @route="model" @model={{model}}> {{model.title}} </LinkTo></li>
{{/each}}
</ul>
实际的链接工作正常,因为它会将我带到正确的模型页面,但是,url显示为/cars/undefined/undefined
。(虽然这可以通过传递@models={{array @model.id model.id}}
来修复,但在这一点上,这似乎是一个解决方案)
1条答案
按热度按时间dzhpxtsq1#
解决方案实际上是使用
index
路由。cars.car.index
和cars.car.model
也是如此,但是你应该使用cars.car
路径来加载公共的car
模型,然后你可以使用this.modelFor('cars.car')
在cars.car.index
路径中访问它。然后你可以在
cars.car
路线中访问params.car_id
,用它来装载汽车,然后用modelFor
从cars.car.index
和cars.car.model
路线访问这辆汽车。