当前 ember-late 中的 CollectionView 错误？答案

【问题标题】：CollectionView error in current ember-latest?当前 ember-late 中的 CollectionView 错误？
【发布时间】：2012-06-20 19:30:00
【问题描述】：

我用 ember-0.9.8.1.js 做了一些测试，下面的代码按预期工作。之后，我阅读了有关路由器的信息，并且该路由器的代码仅在当前的 ember-latest.js (16.06.2012) 中可用。我用这个版本测试下面的代码。问题是列表被渲染：

  <div id="ember143" class="ember-view">
    <ul id="PersonList" class="ember-view ListBox">
      <li id="ember179" class="ember-view">
       <script id="metamorph-0-start" type="text/x-placeholder"></script>
       <script id="metamorph-0-end" type="text/x-placeholder"></script>
      </li>
      <li id="ember183" class="ember-view">
        <script id="metamorph-1-start" type="text/x-placeholder"></script>
        <script id="metamorph-1-end" type="text/x-placeholder"></script>
      </li>
      <li id="ember187" class="ember-view">
        <script id="metamorph-2-start" type="text/x-placeholder"></script>
        <script id="metamorph-2-end" type="text/x-placeholder"></script>
      </li>
      <li id="ember191" class="ember-view">
        <script id="metamorph-3-start" type="text/x-placeholder"></script>
        <script id="metamorph-3-end" type="text/x-placeholder"></script>
      </li>
      </ul>
     </div>

但是是空的。与

有关的东西

模板：Ember.Handlebars.compile("{{content.name}}"),

工作不正常或某些语法方面发生了变化。

代码行

console.log("content:",this.get('content'));

在点击处理程序中显示，正确的内容在那里，但是

Ember.Handlebars.compile("{{content.name}}"),

不会呈现内容。

这是一个错误吗？？？

Javascript 代码：

 var App = Em.Application.create({

    ready: function(){
        App.personListController.getData();
    }
    });


    // Model Objects

    App.Person = Ember.Object.extend({
      name: null,
      myTickets: null,
      selected: false
    });


    // Liste von Personen anlegen

    App.personListController = Ember.ArrayController.create({

    getData: function(){

        $.get('json/person.json', function(data) {
            var personList = Ember.A([]);
            data.forEach(function(item) {
                var p = App.Person.create({
                    'name': item.name,
                    'myTickets': null,
                    'selected': false
                });
                personList.pushObject(p);
            });
            App.personListController.set('content', personList);
        })
    },
    resetSelection: function(){
        App.personListController.content.forEach(function(item){
            item.set('selected',false);
        })
    },
    selectedPerson: null
    });


    App.PersonList = Ember.CollectionView.extend({
      tagName: 'ul',
      contentBinding: 'App.personListController.content',
      classNames: ['ListBox'],
      mouseenter: function(event){
        console.log("PersonList.content:",this.get('content'));
      },

    itemViewClass: Ember.View.extend({
        template: Ember.Handlebars.compile("{{content.name}}"),
        classNameBindings: ['selected:selected'],
        selectedBinding: 'content.selected',
        click:
            function(event){
                App.personListController.resetSelection() ;
                this.setPath('content.selected',true);
                App.personListController.set('selectedPerson',this.get('content'));
                console.log("ItemViewInfo selected:",this.getPath('content.selected'));
                console.log("content:",this.get('content'));
                //this.set('isSelected',true);
            }
       })
    });

HTML：

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

   {{/view}}
</script>

【问题讨论】：

标签： ember.js handlebars.js collectionview

【解决方案1】：

这是因为 view 的查找上下文在最近的提交中发生了变化。现在，如果您想在view 上查找属性，则必须在前面加上view。请参阅提交 8a6c6 中的文档更新。

模板因此更改为

template: Ember.Handlebars.compile("{{view.content.name}}")

见http://jsfiddle.net/pangratz666/DsdHU/。

Tom Dale 有一个Gist，它进一步解释了这些变化。

【讨论】：

【解决方案2】：

latest-ember.js（以及 ember-1.0.pre.js）不再包含把手，你必须自己包含它。

您现在还必须自己启动事件循环：！！ -> 好像你不再需要那个了.. !!

App.initialize();

..相关的jsfiddle：http://jsfiddle.net/aGMzD/

【讨论】：