如何使用Ember js在一个页面中显示多个路由？

Question

我是 Ember 的新手，我遇到了无法解决的问题。我有两条路线——家和 lhstree。调用 /home 时，我需要渲染两条路线。 lhstree 应该在主页模板中呈现。为此，我使用了 named outlet。效果很好。但问题是，我需要向 lhstree 模板提供数据。但是永远不会调用 lhstree 模板的模型挂钩。我什至尝试在模型挂钩中添加警报消息，但也从未执行过。下面是我的代码。感谢任何帮助。

router.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 路由的模型挂钩。因此，渲染主页模板时，玩家名称 Player1 和 Player2 永远不会显示。

Answer 1

同时 rendering a template you can only set a template to an outlet, not a route. Therefore, in your case lhstree.hbs is called but lhstree.js route will not be called. If you want to pass data to the template in your outlet, you can call set the data in your home route. You can take a look at this twiddle.

Answer 2

有两种不同的方法可以解决这个问题：

如果 lhstree 总是在主页上，请不要为它使用路由。您可以将其构建为组件，并将属性从父级向下传递给它（因此在 Home 模型路由中获取 lhstree 所需的数据）。所以你的插座将被替换为：
```
{{lhstree-component model=model.lhsStuff}}
```
将lhstree设为Home的子路由。这样，当有人访问 home/lhstree Ember 时，会将 lhstree 模板渲染到 Home 模板内的插座中，并将调用两个模型。为此，请像这样设置您的路线：
```
Router.map(function() {
  this.route('home', function() {
    this.route('lhstree');
  });
});
```

如何使用Ember js在一个页面中显示多个路由？

How to display multiple routes in one page using Ember js?

html

javascript

ember.js