Question

我正在尝试为我的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}}与主{{outlet}}共享控制器，所以我不知道发生了什么。

Answer 1

使用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/

的小提琴

为什么{{partial}}不与{{outlet}}共享控制器

1 个答案: