Question

我是Ember的新手，我遇到了一个我无法解决的问题。我有两条路线 - 家和lhstree。当调用/ home时，我需要两个路由都被渲染，即。 lhstree应该在主页模板中呈现。为此，我使用了名为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

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

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

Answer 2

rendering a template twiddle只能将模板设置为outlet，而不是路线。因此，在您的情况下，调用lhstree.hbs但不会调用lhstree.js路由。如果要将数据传递到插座中的模板，可以调用设置主路径中的数据。您可以查看此https://glouton.ca。

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

2 个答案: