Question

      var Person = Backbone.Model.extend({
    defaults: {
        name: "John Doe",
        age: 27,
        designation: "worker"
    },
    initialize : function(){
        this.on("invalid",function(model,error){
            alert(error);
        });
    },
    validate: function(attrs){
        if(attrs.age < 0){
         return 'Age must be positive,stupid';
        }
        if( ! attrs.name ){
            return 'Name should not be empty';
        }
    },

    work: function(){
        return this.get('name') + ' is a ' + this.get('designation');
    }
});

var PersonCollection = Backbone.Collection.extend({
    model: Person
});

var peopleView = Backbone.View.extend({
    tagName: 'ul',
    render: function(){
        //filter through all the items in a collections
        //for each, create a new PersonView
        //append it to root element

        this.collection.each(function(person){
            //console.log(person);
            var personView = new PersonView({model:person});
            this.$el.append(personView.render().el);
        },this);
    }
});

// The view for a Person
var PersonView = Backbone.View.extend({
    tagName : 'li',
    className : 'person',
    id : 'person-id',
    template: _.template( $('#personTemplate').html() ), 
    initialize : function(){
        _.bindAll(this,'render');
        //console.log(this.model)
        this.render();
    },

    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var modelperson = new Person;
var viewperson = new PersonView({model : modelperson});

var personCollection = new PersonCollection([
    {
        name: "raghu",
        age:24
    },
    {
        name: "shashank",
        age:23,
        designation: "CTO"
    },
    {
        name : "junaid",
        age : 30,
        designation : "UI"
    },
    {
        name: "vishnu",
        age: 23,
        designation: "content developer"
    }

    ]);

var peopleView = new PersonView({collection: personCollection});

我得到的错误就像调用'toJSON'未定义，我不知道如何摆脱它。

Answer 1

您需要在model

中传递view

更改代码的last line

var peopleView = new PersonView({collection: personCollection});

到

var peopleView = new PersonView({collection: personCollection,model:new Person()});

Demo

已更新，我认为其peopleView代替personView所以最后一行应该是这样的，

 var pw = new peopleView ({collection: personCollection});
 pw.render();

然后你需要改变你的peopleveiw喜欢，

var peopleView = Backbone.View.extend({
    tagName: 'ul',
    render: function(){
        //filter through all the items in a collections
        //for each, create a new PersonView
        //append it to root element

        this.collection.each(function(person){
            //console.log(person);
            var personView = new PersonView({model:person});
            this.$el.append(personView.render().el);
        },this);
        // apend the element to body if not exists
        $(this.$el).appendTo('body');
    }
});

Updated Demo

Answer 2

这里有更清晰的代码，在我的最后工作。请记住，我正在使用把手进行模板化，但您可以选择使用您熟悉的模板库。

  var Person = Backbone.Model.extend({
      defaults: {
      name: "John Doe",
      age: 27,
      designation: "worker"
      },
      initialize : function(){
      this.on("invalid",function(model,error){
          alert(error);
      });
      },
      validate: function(attrs){
      if(attrs.age < 0){
       return 'Age must be positive,stupid';
      }
      if( ! attrs.name ){
          return 'Name should not be empty';
      }
      },
      work: function(){
      return this.get('name') + ' is a ' + this.get('designation');
      }
  });

  var PersonCollection = Backbone.Collection.extend({
      model: Person
  });

  var PersonView = Backbone.View.extend({
      el : "#list",
      render: function(){
      this.collection.each(function(person){
          var personViewItem = new PersonViewItem({model:person});
          this.$el.append(personViewItem.render().el);
      },this);
      }
  });

  // The view for a Person
  var PersonViewItem = Backbone.View.extend({
      tagName : 'li',
      className : 'person',
      template : Handlebars.compile($('#template').html()),
      initialize : function(){
         _.bindAll(this,'render');
         this.render();
      },
      render: function(){
          this.$el.html(this.template(this.model.toJSON()));
          return this;
      }
  });

  var personCollection = new PersonCollection([{name: "raghu",age:24},{name: "shashank",age:23,designation: "CTO"},{name : "junaid",age : 30,designation : "UI"},{name: "vishnu",age: 23,designation: "content developer"}]);     
  var peopleView = new PersonView({collection: personCollection});
  peopleView.render();

未捕获的TypeError：无法调用骨干中未定义的方法'toJSON'

2 个答案: