0

我正在尝试创建我的第一个 ember 应用程序，但我无法使用应用程序模板加载模板：

以下是我的布局的简化版本：

    <script type="text/x-handlebars">
     {{outlet}}
    </script>

如何在页面加载时将另一个模板放入出口部分？

提前致谢

例如，如果我的第二个模板是：

    <script type="text/x-handlebars" id="yellow">
     <p>Something</p>
    </script>
4

2 回答 2

0

@Marcio 答案是正确的，ember 确实创建了一个隐式index路线。

然而，这里最重要的部分是，如果你有，比如说yellow你想在application's中呈现这样的路由{{outlet}}（而不是隐式索引模板），那么你需要path为该路由定义一个，以便对应的命名模板，（在您的情况下yellow）将被呈现为application's{{outlet}}而不是隐含的index：

App.Router.map(function() {
  this.route('yellow', {path: '/'})
});

<script type="text/x-handlebars" data-template-name="application">
  <h1>Hi</h1>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="yellow">
  <h2>Welcome from yellow</h2>  
</script>

如果您不这样做，则 ember 将搜索要index在插座内呈现的模板，并且由于您没有模板，因此不会显示任何内容。同样，通过为您的路线定义一个pathlike ，您可以指示 ember 使用模板而不是."/"yellowyellowindex

当然，如果您将yellow模板重命名为indexthen ，它将被 ember 拾取并在application插座内渲染，您无需为yellow路由指定路径。

示例jsfiddle。

希望能帮助到你。

于 2013-09-11T18:45:45.103 回答
0

当您创建这样的路线时：

App.Router.map(function() {
  this.route('yellow')
});

并且执行到yellow路由的转换。例如，通过{{#link-to 'yellow'}}Yellow{{/link-to}} or changing the url tohttp://www.yourhost.com#/yellow `

在 dom 中附加了一个车把模板，与路由同名：

<script type="text/x-handlebars" id="yellow">
  <p>Something</p>
</script>

默认情况下，emberroute('index')在您的路由器映射中创建一个，如下所示：

App.Router.map(function() {
  this.route('yellow')
  // this.route('index', { path: '/' })
});

所以创建一个索引模板就可以了

<script type="text/x-handlebars" id="index">
 Welcome
</script>

当用户导航到 urlhttp://www.yourhost.com时，他会看到Welcome.

请参阅此演示http://jsfiddle.net/marciojunior/Db49u/

于 2013-09-11T18:33:21.717 回答