升级到Ember 0.9.6后，手柄模板中的递归视图不工作 [英] Recursive view in handlebars template not working after upgrading to Ember 0.9.6

问题描述

Javascript：

$ b $我以前能够做这样的事情来获得一个嵌套的无序的项目列表： b

  App.Menu = Em.View.extend（{
 
控制器：App.menuController.create（{}），
 
 tagName：'ul'，
 
 templateName：'菜单'，
 
 pageBinding：'controller.page'
 
}）; 
  

Handlebars：

 code><李> 
 {{page.menuTitle}} 
 {{#each page.childrenPages}} 
 {{查看App.Menu pageBinding =this}} 
 {{/ each} } 
< / li> 
  

index.html：

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

现在更新到最新的Ember.js（0.9.6）后，只有最后一项在< ul> 中显示项目集合（作为单个< li> ）。在以前的Ember版本中，嵌套的< ul> / < li> 列表与给定的所有项目收藏被显示。

我认为，而不是每次通过{{#each}}创建一个新的App.Menu视图，现有的视图只是被重用...任何想法关于我如何能够实现类似于老行为的东西？

解决方案

我认为问题是通过创建控制器在类 App.Menu 中的控件属性对于每个具体实例 App.Menu ，请参阅了解Ember.Object 。

我已经将视图类中的特定控制器的绑定移动到它的工作中，请参阅 http://jsfiddle.net/pangratz666/DgG9P/

手把：

 < script type =text / x-handlebarsdata-template-name =Menu> 
< li> 
 {{page.menuTitle}} 
 {{#each page.childrenPages}} 
 {{查看App.Menu pageBinding =this}} 
 {{/ each} } 
< / li> 
< / script> 
 
< script type =text / x-handlebars> 
 {{查看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。 （{
 menuTitle：'subtitle 2  -  child 1'
 $ b}）] 
}）; 
  

I used to be able to do something like this to get a nested unordered list of items:

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>

Now after updating to the latest Ember.js (0.9.6), only the last item of any given collection of items is being displayed (as a single <li> within the <ul>). In previous versions of Ember, a nested <ul>/<li> list with all items of a given collection was displayed.

I think that instead of a new App.Menu view being created each time through {{#each}}, the existing view is just being reused... any ideas on how I can achieve something similar to the old behavior?

解决方案

I think the issue is that by creating the controller inside the class App.Menu the controller property is the same for every concrete instance of App.Menu, see Understanding Ember.Object.

I've moved the binding to the specific controller out of the view class and it works, see 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'
        })]
    })]
});​

这篇关于升级到Ember 0.9.6后，手柄模板中的递归视图不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！