Ember.js CollectionView strange behavior

Ember.js CollectionView strange behavior

I am trying to create autocomplete behavior with emberjs. I am observing
in the controller an input field (searchCities) and making ajax calls
according to that field. I have a view which handles additional logic, and
should display a list of clickable cities as suggestions. So far I have
the following code:
labelView = Ember.View.extend({
templateName: 'crisis/searchedCities',
geoData: null,
click:function(){
debugger;
}
}),
ModalView = Ember.View.extend({
cities: null,
didInsertElement: function() {
this.cities = Ember.CollectionView.create({
tagName: 'span',
itemViewClass: labelView,
});
},
cityList: function(){
var callback,
cityArray = Ember.ArrayProxy.create({
content: []
}),
cities = this.get('cities'),
searchCity = this.get('controller').get('searchCity'),
regExp = new RegExp(searchCity, 'i');
if (!searchCity){
return;
}
callback = function(data){
var aux = data.filter(function(geoObjects){
return geoObjects.city.match(regExp);
}).slice(0,9);
cities.clear();
aux.forEach(function(geoData){
cities.pushObject(labelView.create({geoData:geoData}))
});
};
Store.resolveGeoData(callback);
}.property('controller.searchCity')
});
In my template I have the following code:
{{view Ember.TextField valueBinding=searchCity placeholder="City"}}



{{/each}}
So here is the unusual thing, what I do not understand: if I remove the
{{/each}} the view.cities does not gets displayed, otherwise it does. Even
when it gets rendered the text is not clickable so the click event does
not gets triggered.