问题描述
我曾经能够做这样的事情来获得一个嵌套的无序列表:
I used to be able to do something like this to get a nested unordered list of items:
Javascript:
Javascript:
App.Menu = Em.View.extend({
controller: App.menuController.create({}),
tagName: 'ul',
templateName: 'Menu',
pageBinding: 'controller.page'
});
车把:
<li>
{{page.menuTitle}}
{{#each page.childrenPages}}
{{view App.Menu pageBinding="this"}}
{{/each}}
</li>
index.html:
index.html:
<script type="text/x-handlebars">
{{view App.Menu}}
</script>
现在更新到最新的 Ember.js (0.9.6) 后,只显示任何给定项目集合的最后一个项目(作为
- ).在以前的 Ember 版本中,显示了一个嵌套的
列表,其中包含给定集合的所有项目.
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.我认为不是每次通过 {{#each}} 创建一个新的 App.Menu 视图,现有的视图只是被重用......关于如何实现类似于旧行为的任何想法?
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?
推荐答案
我认为问题是通过在
App.Menu
类中创建controller
控制器属性对于App.Menu
的每个具体实例都是相同的,参见 了解 Ember.Object.I think the issue is that by creating the
controller
inside the classApp.Menu
the controller property is the same for every concrete instance ofApp.Menu
, see Understanding Ember.Object.我已将绑定到特定控制器的视图类移出并且可以正常工作,请参阅 http:///jsfiddle.net/pangratz666/DgG9P/
I've moved the binding to the specific controller out of the view class and it works, see http://jsfiddle.net/pangratz666/DgG9P/
把手:
<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 后,车把模板中的递归视图不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
/