ember.js - 升级到 Ember 0.9.6 后 Handlebars 模板中的递归 View 不起作用

Question

我曾经能够做这样的事情来获得一个嵌套的无序列表:

Javascript:

App.Menu = Em.View.extend({

    controller: App.menuController.create({}),

    tagName: 'ul',

    templateName: 'Menu',

    pageBinding: 'controller.page'

});

Handlebars :

<li>
    {{page.menuTitle}}
    {{#each page.childrenPages}}
        {{view App.Menu pageBinding="this"}}
    {{/each}}
</li>

index.html:

<script type="text/x-handlebars">
    {{view App.Menu}}
</script>

现在，在更新到最新的 Ember.js (0.9.6) 之后，只会显示任何给定项目集合的最后一项(作为 <li> 中的单个 <ul> )。在以前版本的 Ember 中，一个嵌套的 <ul>/<li>显示了包含给定集合的所有项目的列表。

我认为不是每次通过 {{#each}} 创建一个新的 App.Menu View ，而是重复使用现有的 View ...关于如何实现与旧行为类似的东西的任何想法？

Answer 1

我认为问题在于，通过在 App.Menu 类中创建 controller，controller 属性对于 App.Menu 的每个具体实例都是相同的，参见 Understanding Ember.Object .

我已将绑定(bind)到特定 Controller 的绑定(bind)移出 View 类并且它可以工作，请参阅 http://jsfiddle.net/pangratz666/DgG9P/

Handlebars :

<script type="text/x-handlebars" data-template-name="Menu" >
    <li>
        {{page.menuTitle}}
        {{#each page.childrenPages}}
            {{view App.Menu pageBinding="this"}}
        {{/each}}
    </li>
</script>

<script type="text/x-handlebars">
    {{view App.Menu pageBinding="App.mainPage" }}
</script>

JavaScript:

App = Ember.Application.create({});

App.Menu = Em.View.extend({
    tagName: 'ul',
    templateName: 'Menu'
});

App.mainPage = Ember.Object.create({
    menuTitle: 'main page',
    childrenPages: [Ember.Object.create({
        menuTitle: 'subtitle 1',
        childrenPages: [Ember.Object.create({
            menuTitle: 'subtitle 1 - child 1'
        })]
    }), Ember.Object.create({
        menuTitle: 'subtitle 2',
        childrenPages: [Ember.Object.create({
            menuTitle: 'subtitle 2 - child 1'
        })]
    })]
});​