在 emberjs 的插座中绑定子视图和集合答案

【问题标题】：Binding child views and collections within an outlet in emberjs在 emberjs 的插座中绑定子视图和集合
【发布时间】：2012-07-25 05:43:53
【问题描述】：

我正在尝试在 {{outlet}} 内渲染视图 Team。这个Team 视图由一个简单的Person 视图（团队负责人）和一组Person 视图（团队成员）组成。通过在 ApplicationController 上调用 connectOutlet() 来设置出口。

尽管Person 子视图按预期呈现在标记中，但name 的所有值都丢失了。看来我的绑定和/或控制器设置不正确。我错过了什么？

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

相关车把模板有：

<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>

代码sn-p：

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"
}),
// ...

【问题讨论】：

标签： javascript ember.js handlebars.js

【解决方案1】：

你可以使用

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

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

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

【讨论】：

啊哈，谢谢！我需要使用 context，而不是 content。一个角色改变了世界（一如既往）。
为什么使用 {{each}} 而不是 {{collection}}？我的印象是两者都还可以，但不可否认，我无法判断 {{collection}} 是否已被官方推荐和/或是否会在 ember 的未来继续存在。

【解决方案2】：

不太清楚发生了什么，但我调整了您的小提琴以使其正常工作：

http://jsfiddle.net/lifeinafolder/sPcwv/

似乎绑定在某种意义上无法正常工作：

contentBinding="this"

有效但

contentBinding="this.leader"

没有。

抱歉，我无法解决更多问题。

【讨论】：

还注意到您正在使用 ember-latest 和 handlebars beta。您是否尝试过使用更稳定的旧版本？
我喜欢危险的生活。不，实际上，我想在我的路线上使用 connectOutlets，这在 0.9.8.1 中尚不可用。

【解决方案3】：

您正在通过contentBinding 在人员视图上设置content 变量，这可能应该是personBinding。然后在你的模板中你应该得到view.person.name。

{{collection}} 应该是 {{each}} 块。

{{#each members}}
    {{view App.PersonView personBinding="this"}}
{{/each}}

这个人物模板会在正确的位置寻找名字。

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

没有改变你的 js。

小提琴：http://jsfiddle.net/albertjan/fkKFJ/9/

【讨论】：