javascript - 骨干网 - 视图没有“获取”方法

Question

嗨伙计！

我刚开始学习 Backbone，我的第一个代码有问题。我制作的示例代码有一个按钮，一旦单击该按钮，就会添加一段代码（视图），它应该从模型中获取一些默认值。但我收到一条消息，上面写着：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 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();

Answer 2

尝试

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