Question

在我的场景中，我有items路由，其item嵌套路由看起来像

this.route('items',function(){
    this.route('item',{path:':item_id'});
});

此嵌套路线会渲染一个滑动超出父路线内容的组件，以便您可以将其滑动。我有另一条名为watch-list的路线，它显示与items类似的项目，但显示的项目更多，我想要的行为与item如何呈现滑动超出父内容的组件的行为相同它可以被刷掉。但是，如果我链接到items.item，它会离开此路线转到items，以便item路线可以滑动动画内容。因此，为了解决这个问题，我将item嵌套路由添加到watch-list，如此

this.route('watch-list',function(){
    this.route('item',{path:':item_id'});
});

与items和items.item完全相同，所以它现在呈现items.item所做的相同组件，并使我的滑动动画超出父watch-list内容。问题是现在我有两条路线显示单个项目，我真的希望items.item成为我的单项路线，无论链接到它的项目列表在哪里。

我是否可以链接到items.item以显示单个项目，并让URL更改以反映该项目，但是将其渲染到我的watch-list路径中以便单个项目组件会滑过watch-list内容的顶部而不是首先渲染items吗？

此外，每个模板或多或少看起来有希望获得更好的清晰度

// items template
{{#each sortedItems key="id" as |item|}}
    {{#link-to "items.item" item}}
        ...
    {{/link-to}}
{{/each}}
{{outlet}}

// items.item template
{{item-component item=model}}

观察列表是相同的布局，所以我得到相同的效果

// watch-list template
{{#each sortedItems key="id" as |item|}}
    {{#link-to "watch-list.item" item}}
        ...
    {{/link-to}}
{{/each}}
{{outlet}}

// watch-list.item template
{{item-component item=model}}

链接到路由但将其渲染到当前路径出口

0 个答案: