Question

我正在尝试在Team内呈现视图{{outlet}}。此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>

代码段：

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/

Answer 2

不是很确定最新情况，但我调整了你的小提琴以使其正常工作：

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

似乎绑定在某种意义上不能正常工作：

contentBinding = “这个”

有效但

contentBinding = “this.leader”

没有。

很抱歉，但我无法解决这个问题。

Answer 3

您要通过content在人员视图中设置contentBinding变量，该变量应该是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/

在emberjs的插座中绑定儿童视图和集合

3 个答案: