javascript - Uncaught TypeError:无法在主干中调用未定义的方法“toJSON”

      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'的调用的错误，我不知道该如何摆脱。

最佳答案

您需要在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

关于javascript - Uncaught TypeError:无法在主干中调用未定义的方法“toJSON”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21899338/