CollectionView error in current ember-latest? - ember.js

Question

I made some tests with ember-0.9.8.1.js and the following code works as expected.
After that I read about the router and that the router - code is only available in the current ember-latest.js (16.06.2012).
I test the code below with this version.
The problem is the list is rendered:
<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>
but is empty.
Something with the
template: Ember.Handlebars.compile("{{content.name}}"),
is not working correctly or some syntax aspects has changed.
The code line
console.log("content:",this.get('content'));
in the click handler shows, that the right content is there, but
Ember.Handlebars.compile("{{content.name}}"),
will not render the content.
Is this a bug ???
Javascript Code:
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>

Answer 1

That's because the lookup context for a view changed in the latest commits. Now you have to prepend view if you want to lookup a property on the view. See documentation updates in commit 8a6c6.
The template therefore changes to
template: Ember.Handlebars.compile("{{view.content.name}}")
see http://jsfiddle.net/pangratz666/DsdHU/.
Tom Dale has a Gist which explains the changes further.

Answer 2

The latest-ember.js (aswell as ember-1.0.pre.js) does not include handlebars anymore, you have to include it by your own.
You also have to start the event-loop yourself now:
!! -> seems like you don't need that anymore.. !!
App.initialize();
..the associated jsfiddle: http://jsfiddle.net/aGMzD/