Question

目前学习骨干，目前处于非常基础的水平，我已经设置了与人员数据相关的model, view and collection，并希望使用Handlebars来模拟这些数据。所以我用默认值创建了我的人员模型，创建了一个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
});

链接到演示http://jsbin.com/oFIxizuq/6/edit?html,js,output

Answer 1

问题是您将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();属性，那么使用代码的另一种方法是：

{{1}}

猜猜我也可以为你添加这个例子http://jsbin.com/opuroNO/1/edit

Answer 2

我已经更改了您应用的逻辑，好吧，在您的应用中存在一些问题。你不使用收藏品要使用集合，您需要像模型一样默认添加元素打印模型而不是集合的其他问题，你打印总是一行，因为使用html（）你总是覆盖你的HTML。

这是我为您创建的解决方案。它对我来说很好。

DEMO

请尝试：

//Model
var Person = Backbone.Model.extend({

  //Default Attributes
  defaults: {
    'name': 'Joe',
    'age': 29,
    'gender': 'male',
    'country': 'UK'
  }

});



//Create People Collection to hold multiple Person Models
var PeopleCollection = Backbone.Collection.extend({
  model: Person,
  addPerson: function(elements, options) {
                return this.add(elements, options);
        }
});

//View
var PersonView = Backbone.View.extend({

//   tagName: '',

  //Get the template markup
  template: $('#person-template').html(),

  initialize: function() {  
    this.collection = new PeopleCollection([],{ });  
    var p = { name: 'James',age: 34, gender: 'male' , country: 'USA'}; 
    var p2 = { name: 'Jason',age: 31, gender: 'male' , country: 'Australia'};
    this.elementModel = new Person(p);
    this.collection.addPerson(this.elementModel);
    this.elementModel = new Person(p2);
    this.collection.addPerson(this.elementModel);


    this.$el.personCtn = $('#person-ctn');

//     console.log('His name is ' + this.model.get('name') );

    console.log(this.collection);

    this.render();
  },

  render: function() {

    //Compile this.template === #person-template
    var template = Handlebars.compile(this.template);
    var here = this;
    //Actually add to page
    $.each( this.collection.models , function( key, value ) {
        console.log(value);
       here.$el.personCtn.append( template( value.toJSON() ) );
    });


    return this;
  }

});

//Instantiate the Person View
var personView = new PersonView({

});

Backbone Model默认不会被Model数据覆盖

2 个答案: