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

问题描述

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

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 class App.Menu the controller property is the same for every concrete instance of App.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 后，车把模板中的递归视图不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！