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

标签 javascript html ember.js

我是 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 永远不会显示。

最佳答案

有两种不同的方法来解决这个问题:

  1. 如果 lhstree 总是在主页上,请不要为它使用路由。您可以将其构建为组件,并将属性从父级向下传递给它(因此在 Home 模型路由中获取 lhstree 所需的数据)。所以你的 socket 将被替换为:

    {{lhstree-component model=model.lhsStuff}}
    
  2. 让 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/

相关文章:

javascript - 如何消除 Angular Controller 中的代码重复?

javascript - 循环遍历 html 选择和输入

javascript - Uncaught ReferenceError :ajax is not defined (repeated 2 times)

html - 当绝对的 child 时 Bootstrap 容器不居中

ember.js - 带动态 Controller /模板的 Ember 渲染助手

javascript - 是否可以按未查询的维度对 Google Analytics 数据进行排序?

html - 摆脱表格中的填充

javascript - 滑动 li 元素

ember.js - Ember : How to execute a promise after this. 发送()

ember.js - 何时使用 SproutCore 和何时使用 Ember