目前正在学习Backbone，目前在一个非常基础的水平上，我已经建立了一个model, view and collection与个人数据相关的文档，并希望使用Handlebars将这些数据模板化。因此，我已经使用默认值创建了Person模型，并创建了一个People Collection that listens for the Person Collection and my Person View which should output my model data。但是目前只输出默认数据，所以我想我做错了。如果有人可以提供任何建议，那将是很棒的！
JS
//Model
var Person = Backbone.Model.extend({
//Default Attributes
defaults: {
'name': 'Joe',
'age': 29,
'gender': 'male',
'country': 'UK'
}
});
//Instantiate the Person Model
var person = new Person();
//Create People Collection to hold multiple Person Models
var PeopleCollection = Backbone.Collection.extend({
model: Person
});
//Add multiple Person Models into People Collection, check out the [] as this is content in JSON style
var peopleCollection = new PeopleCollection([
{
'name': 'James',
'age': 34,
'gender': 'male',
'country': 'USA'
},
{
'name': 'Jason',
'age': 31,
'gender': 'male',
'country': 'Australia'
}
]);
//View
var PersonView = Backbone.View.extend({
// tagName: '',
//Get the template markup
template: $('#person-template').html(),
initialize: function() {
this.$el.personCtn = $('#person-ctn');
// console.log('His name is ' + this.model.get('name') );
console.log(this.model);
this.render();
},
render: function() {
//Compile this.template === #person-template
var template = Handlebars.compile(this.template);
//Actually add to page
this.$el.personCtn.html( template( this.model.toJSON() ) );
return this;
}
});
//Instantiate the Person View
var personView = new PersonView({
'model': person
});
问题是您将person模型传递给视图，该视图是在调用以下代码时使用默认值创建的：
// A Person model with default values
var person = new Person();
// You then pass the person model to the PersonView
var personView = new PersonView({
'model': person
});
相信您打算将传递peopleCollection给Backbone.View。看起来像：
//Instantiate the Person View
var personView = new PersonView({
collection: peopleCollection
});
但是也许因为它是一个集合，所以我们称之为它peopleView。
//View
var PeopleView = Backbone.View.extend({
//Get the template markup
template: $('#person-template').html(),
render: function() {
var template = Handlebars.compile(this.template);
var view = this;
// render each model with the template
this.collection.each(function(model) {
view.$el.append(template(model.toJSON()));
});
return this;
}
});
// Create the view and pass the peopleCollection
var peopleView = new PeopleView({
collection: peopleCollection
});
您的示例中的一个小提琴：http : //jsbin.com/oFIxizuq/8/edit
一些建议：
而不是this.$el.personCtn = $('#person-ctn')应该el在实例化或extend视图时为视图分配一个属性（如果您知道元素存在），这new PeopleView({el:'#person-ctn'});将是一种方法。然后，您可以在视图中使用来访问该元素this.$el。
你可以移动Handlebars.compile到template属性。如，template:Handlebars.compile($('#person-template').html())
因此，如果要提供el属性，则可以使用代码的另一种方法是：
var PeopleView = Backbone.View.extend({
el:'#person-ctn',
template: Handlebars.compile($('#person-template').html()),
render: function() {
var view = this;
this.collection.each(function(model) {
view.$el.append(view.template(model.toJSON()));
});
return this;
}
});
var peopleView = new PeopleView({
collection: peopleCollection
});
peopleView.render();
猜猜我也可以为您添加该示例http://jsbin.com/opuroNO/1/edit
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句