【发布时间】：2013-07-08 16:59:33
【问题描述】：
我在海上，对于最新版本的 Ember 的任何帮助，我将不胜感激。使用todo 示例，我尝试在以下改编的http://jsfiddle.net/5HMzu/3/ 中包含路由和DS 模型
当我在车把模板中使用#each 控制器时，输出符合预期；将其替换为 CollectionView 并尝试将其绑定到数据源，没有任何输出。
插入的代码：
App.PersonCollectionView = Ember.CollectionView.extend({
itemViewClass: "App.ListOfPeopleTemplateView",
emptyView: Ember.View.extend({
template: Ember.Handlebars.compile("Oh dear, the collectionView is empty")
}),
contentBinding: "App.listOfpeopleTemplateController"
});
结果：“天哪，collectionView 是空的”
模板
<body>
<script type="text/x-handlebars">
<!-- an attempt to show the data template 'listOfPeopleTemplate' using a CollectionView -->
{{view App.PersonCollectionView}}
</script>
<script type="text/x-handlebars" data-template-name="listOfPeopleTemplate">
{{test}}
<!-- This was working before I removed the #each and tried to use a CollectionView -->
<!-- {{#each controller}} -->
<fieldset>
<label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label>
{{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}
<br/>
<label {{bindAttr for="view.tbFirstName.elementId"}} class="RequiredLabel">First Name</label>
{{view App.DetailTextField viewName="tbFirstName" valueBinding="firstName"}}
<br/>
<label {{bindAttr for="view.tbSurname.elementId"}} class="RequiredLabel">Surname</label>
{{view App.DetailTextField viewName="tbSurname" placeholder="surname" valueBinding="surname"}}
<br/>
</fieldset>
<!-- {{/each}} -->
</script>
JS
//the application
App = Ember.Application.create();
//the models
App.PersonModel=DS.Model.extend({
personID: DS.attr('number'),
firstName: DS.attr('string'),
surname: DS.attr('string'),
fullName: Ember.computed(function () {
return this.get('firstName') + ' ' + this.get('surname');
// Tell Ember that this computed property depends on firstName
// and lastName
}).property('firstName', 'surname')
});
App.Store=DS.Store.extend({
revision: 12,
adapter: 'DS.FixtureAdapter'
});
App.PersonModel.FIXTURES = [{
id: 1,
"personID": "1",
"firstName": "small",
"surname": "Hick"
}, {
id: 2,
"personID": "2",
"firstName": "Katherine",
"surname": "Hosh"
}];
App.Router.map(function () {
this.resource('listOfPeopleTemplate', { path: '/' });
});
//Defining a resource 'listOfPeopleTemplate' will make ember automatically generate a ListOfPeopleTemplateRoute, a ListOfPeopleTemplateController and a ListOfPeopleTemplateView
//You can override this default setup by defining them yourself. This I have done below.
App.ListOfPeopleTemplateRoute = Ember.Route.extend({
model: function() {
return App.PersonModel.find();
}
});
App.ListOfPeopleTemplateController=Ember.ArrayController.extend({
test:"does this work test"
});
App.ListOfPeopleTemplateView=Ember.View.extend({templateName:"listOfPeopleTemplate"});
App.DetailTextField = Em.TextField.extend({
attributeBindings: ['required', 'readonly', 'name']
});
//New code added to try and use the handlebar template with an ember.collectionView
App.listOfpeopleTemplateController=App.ListOfPeopleTemplateController.create();
App.PersonCollectionView = Ember.CollectionView.extend({
itemViewClass: "App.ListOfPeopleTemplateView",
emptyView: Ember.View.extend({
template: Ember.Handlebars.compile("Oh dear, the collectionView is empty")
}),
contentBinding: "App.listOfpeopleTemplateController"
});
【问题讨论】：
标签： ember.js handlebars.js ember-data