我是 Ember 的新手,我遇到了一个我无法解决的问题。我有两条路线——家和 lhstree。调用/home 时,我需要渲染两条路线。 lhstree 应该在主页模板中呈现。为此,我使用了名为 outlet
的名称。效果很好。
但问题是,我需要向 lhstree 模板提供数据。但是永远不会调用 lhstree 模板的模型 Hook 。我什至尝试在模型 Hook 中添加警报消息,但也从未执行过。下面是我的代码。感谢您的帮助。
路由器.js:
Router.map(function() {
this.route('home');
this.route('lhstree');
});
home.hbs:
<html>
<head>
</head>
<body>
Home hbs rendering
{{outlet 'lhstree'}}
</body>
</html>
home.js:
export default Route.extend({
renderTemplate:function()
{
this.render();
this.render('lhstree',{outlet:'lhstree',into:'home'});
}
});
lhstree.hbs:
<ul>
{{#each model as |player|}}
<li>{{player}}</li>
{{/each}}
</ul>
lhstree.js:
model() //THIS MODEL IS NEVER CALLED
{
return ['Player1', 'Player2'];
}
正如我提到的,永远不会调用 lhstree 路由的模型 Hook 。因此,渲染主页模板时,玩家名称 Player1 和 Player2 永远不会显示。
最佳答案
有两种不同的方法来解决这个问题:
如果 lhstree 总是在主页上,请不要为它使用路由。您可以将其构建为组件,并将属性从父级向下传递给它(因此在 Home 模型路由中获取 lhstree 所需的数据)。所以你的 socket 将被替换为:
{{lhstree-component model=model.lhsStuff}}
让 lhstree 成为 Home 的子路由。这样,当有人去 home/lhstree 时,Ember 会将 lhstree 模板渲染到 Home 模板内的 socket 中,并将调用两个模型。为此,请像这样设置您的路线:
Router.map(function() { this.route('home', function() { this.route('lhstree'); }); });
关于javascript - 如何使用 Ember js 在一个页面中显示多个路由?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47269783/