0

我正在尝试为我的 Ember.js 应用程序创建一个侧边栏。这个想法是创建一个sidebar模板，并根据我正在浏览的路线呈现其内容。

这些是模板：

<script type="text/x-handlebars">
  <div class="col-md-3">
    {{partial sidebar}}
  </div>

  <div class="col-md-9">
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="_sidebar">
  <h1>Message: {{msg}}</h1>
  <ul>
    <li>Item number 1</li>
    <li>Item number 2</li>
    <li>Item number 3</li>
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="maincontent">
  Message: {{msg}}
</script>

控制器完全是微不足道的：

AxpoEM.MaincontentController = Ember.Controller.extend({
  msg: 'Hello world!'
});

当我浏览到/maincontent. 已{{outlet}}正确填充maincontent模板，并{{msg}}正确显示。但是模板中的{{msg}}标签_sidebar是空的。

Ember 文档说它{{render}}与 main 共享控制器{{outlet}}，所以我不知道发生了什么。

4

1 回答 1

2

使用partial视图助手，不要影响上下文、控制器等。所以使用：

<script type="text/x-handlebars">
  Foo
  {{partial "somecontent"}}
  Bar
</script>

是一样的：

<script type="text/x-handlebars">
  Foo
  Your raw content here
  Bar
</script>

在您的情况下，_sidebar部分不知道该msg变量，因为绑定的控制器是ApplicationController. 然后你将它设置在MaincontentController. 如果您想要这种行为，您可以将partial视图助手更改为render，并覆盖绑定的控制器：

<script type="text/x-handlebars">
  <div class="col-md-3">      
    {{! use render since we can override the controller}}
    {{render 'sidebar' controller="maincontent"}}
  </div>

  <div class="col-md-9">
    {{outlet}}
  </div>
</script>

remove the leading underscore from _sidebar
<script type="text/x-handlebars" data-template-name="sidebar">    
  <h1>Message: {{msg}}</h1>
  <ul>
    <li>Item number 1</li>
    <li>Item number 2</li>
    <li>Item number 3</li>
  </ul>
</script>

这是这个工作http://jsfiddle.net/marciojunior/wydtE/的小提琴

于 2013-10-27T14:09:52.940 回答