Backbone - View has no method 'get'

Question

Hi, folks!

I just started to learn Backbone, and I have a problem with my first code. The example code that I made have a button that, once is clicked, adds a piece of code (View), that should get some default values from the model. But I getting a message that says: Object function (){return i.apply(this,arguments)} has no method 'get'. Here is my code:

  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();

I'm a newbie in Backbone, so my question is: what I'm doing wrong?

Thanks for any help!

Answer 1

try with this code. You must be instantiated the model when create a new view.

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

Try

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