骨干 - 视图没有方法'得到'

Question

嗨，伙计们！

我刚开始学习Backbone，我的第一个代码有问题。我做的示例代码中有一个按钮，一旦点击该按钮，就会添加一段代码（View），该代码应该从模型中获取一些默认值。但我收到一条消息：Object function(){return i.apply(this,arguments)} has no method 'get'。这里是我的代码：

var app = {}; 

    // the model 
    app.Answer = Backbone.Model.extend({ 
    defaults: { 
     title: 'Your answer here', 
     isAnswer: false 
    } 
    }); 

    //the collection 
    app.AnswerList = Backbone.Collection.extend({ 
    model: app.Answer, 
    localStorage: new Store("backbone-answers") 
    }); 

    //the view that is added when the button is clicked  
    app.AnswerView = Backbone.View.extend({ 
    tagName: 'li', 
    // template: _.template($('#answer-template').html()), 
    template: _.template('<%= title %>: <%= isAnswer %>'), 

    events: { 
     'click button.destroy': 'remove', 
    }, 

    initialize: function(){ 
     _.bindAll(this, 'render','remove'); 
     // this.model.bind('change', this.render()); 
     this.render(); 
    }, 
    render: function(){ 
     $(this.el).html(this.template({title: this.model.get('title'), isAnswer: this.model.get('isAnswer')})); 
     return this; 
    }, 
    remove: function(){ 
     $(this.el).destroy(); 
    } 
    }); 

    // the main view 
    app.AppView = Backbone.View.extend({ 
    el: $('#body'), 

    events: { 
     'click button#insert-button': 'addAnswer' 
    }, 

    initialize: function(){ 
     _.bindAll(this, 'addAnswer'); 
     this.ul = $('#content'); 
     this.collection = new app.AnswerList(); 
     console.log('initialize'); 
    }, 
    addAnswer: function(){ 
     console.log('append'); 
     var newAnswer = new app.AnswerView({model: app.Answer}); 
     $('ul',this.el).append(newAnswer); 
    } 

    }); 

    app.appView = new app.AppView(); 

我是Backbone的新手，所以我的问题是：我做错了什么？

感谢您的帮助！

Answer 1

尝试

var answer = new app.Answer(); 
var newAnswer = new app.AnswerView({model: answer}); 

Answer 2

尝试使用此代码。 创建新视图时，您必须实例化模型。

var app = {}; 

    // the model 
    app.Answer = Backbone.Model.extend({ 
    defaults: { 
     title: 'Your answer here', 
     isAnswer: false 
    } 
    }); 

    //the collection 
    app.AnswerList = Backbone.Collection.extend({ 
    model: app.Answer, 
    localStorage: new Store("backbone-answers") 
    }); 

    //the view that is added when the button is clicked  
    app.AnswerView = Backbone.View.extend({ 
    tagName: 'li', 
    // template: _.template($('#answer-template').html()), 
    template: _.template('<%= title %>: <%= isAnswer %>'), 

    events: { 
     'click button.destroy': 'remove', 
    }, 

    initialize: function(){ 
     _.bindAll(this, 'render','remove'); 
     // this.model.bind('change', this.render()); 
     this.render(); 
    }, 
    render: function(){ 
     $(this.el).html(this.template({title: this.model.get('title'), isAnswer: this.model.get('isAnswer')})); 
     return this; 
    }, 
    remove: function(){ 
     $(this.el).destroy(); 
    } 
    }); 

    // the main view 
    app.AppView = Backbone.View.extend({ 
    el: $('#body'), 

    events: { 
     'click button#insert-button': 'addAnswer' 
    }, 

    initialize: function(){ 
     _.bindAll(this, 'addAnswer'); 
     this.ul = $('#content'); 
     this.collection = new app.AnswerList(); 
     console.log('initialize'); 
    }, 
    addAnswer: function(){ 
     console.log('append'); 
     var newAnswer = new app.AnswerView({model: new app.Answer()}); 
     $('ul',this.el).append(newAnswer); 
    } 

    }); 

    app.appView = new app.AppView();