javascript - 在 emberjs 中绑定(bind) subview 和集合

Question

我正在尝试在 {{outlet}} 内渲染一个 View Team。此Team View 由一个简单的Person View (团队领导)和一组Person View (团队成员)组成。通过调用 ApplicationController 上的 connectOutlet() 来设置 socket 。

尽管 Person subview 按预期在标记中呈现，但 name 的所有值都丢失了。看来我的绑定(bind)和/或 Controller 设置不正确。我错过了什么？

代码和演示:http://jsfiddle.net/aek38/fkKFJ/

相关的 Handlebars 模板是:

<script type="text/x-handlebars" data-template-name="app">
    <div class="container">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="person">
    <em>Person name is:</em> {{name}}
</script>

<script type="text/x-handlebars" data-template-name="team">
    <h3>Team Leader</h3>
    <em>Leader name should be:</em>{{leader.name}}
    {{view App.PersonView contentBinding="leader"}}
    <h3>Team Members</h3>
    {{#collection contentBinding="members"}}
        {{view App.PersonView contentBinding="content"}}
    {{/collection}}
</script>

代码片段:

App = Ember.Application.create({
ready: function() {
    this.initialize();
},
ApplicationController: Ember.Controller.extend(),
ApplicationView: Ember.View.extend({
    templateName: "app"
}),

Person: Ember.Object.extend({
    name: "Jane Doe"
}),
PersonController: Ember.ObjectController.extend(),
PersonView: Ember.View.extend({
    templateName: "person"
}),

Team: Ember.Object.extend({
    members: [],
    leader: null
}),
TeamController: Ember.ObjectController.extend(),
TeamView: Ember.View.extend({
    templateName: "team"
}),
// ...

Answer 1

您可以使用

{{view App.PersonView contextBinding="leader"}}

并使用 {{#each}} 而不是 {{#collection}} 作为成员

http://jsfiddle.net/LQTsV/1/