Backbone.js - cannot get specified model from collection

Question

I'm currently learning Backbone.js and like and I'm having a little dificult to understand how I can get a model from a collection. The fact is that I don't know if I'm doing the right way of bind new models to a collection. Here is my code:

  var app = {};

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

  // var answer = new app.Answer();

  app.AnswerList = Backbone.Collection.extend({
    model: app.Answer,
    currentStatus : function(status){
      return _(this.filter(function(data) {
          return data.get("isAnswer") == status;
      }));
    },
    // localStorage: new Store("backbone-answers")
  });

  // instance of the Collection
  app.answerList = new app.AnswerList();

  app.AnswerView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#answer-template').html()),

    events: {
      'click button.destroy': 'destroy',
      'change input.answer-edit' : 'updateLabel',
      'click button.edit' : 'editLabel',
      'click button.save' : 'saveLabel',
      'change input.toggle': 'toggleAnswer',      
    },

    initialize: function(){
      _.bindAll(this, 'render','remove', 'unrender', 'updateLabel', 'editLabel', 'saveLabel','toggleAnswer');
      this.model.bind('change', this.render);
      this.model.bind('destroy', this.unrender);
      this.render();
    },
    render: function(){
      $(this.el).html(this.template(
        {
          title: this.model.get('title'), 
          isAnswer: this.model.get('isAnswer'), 
          number: this.model.get('number')
        }
      ));

      $(this.el).find('.answer-edit').hide();
      $(this.el).find('.save').hide();

      return this;
    },
    unrender: function(){
      // console.log('unrender');
      $(this.el).remove();
    },
    destroy: function(){
      // console.log('destroy');
      this.model.destroy();
    },
    editLabel: function(e){
      $(e.target).hide();
      $(this.el).find('.save').show();
      $(this.el).find('.answer-text').hide();
      $(this.el).find('.answer-edit').show();
    },
    updateLabel: function(e){
      var newText = $(e.target).val();
      this.model.set({title: newText});
    },
    saveLabel: function(e){
      $(e.target).hide();
      $(this.el).find('.edit').show();
      $(this.el).find('.answer-edit').hide();
      $(this.el).find('.answer-text').show();
    },
    toggleAnswer: function(e){
      e.stopPropagation();
      if($(e.target).val() == 'on'){
        this.model.set({ isAnswer: true });
      } else {
        this.model.set({ isAnswer: false });
      }
    }
  });


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

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

    initialize: function(){
      _.bindAll(this, 'addAnswer');

      this.collection = new app.AnswerList();
      this.counter = 0;
    },
    addAnswer: function(){
      this.counter++;
      var answer = new app.Answer();
      answer.set({
        number: this.counter
      });

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

      $('ul',this.el).append(newAnswer.render().el);
    },
    getAnswer: function(){
      var theAnswer = this.collection.where({isAnswer: true});
      console.log(theAnswer);
      // alert(theAnswer);
    }

  });

  app.appView = new app.AppView();

I have a model, a collection and two views, one view that handles a piece of code (the answerView part), and another view that adds the answers (and deals with the collection part). So, when I try to return a model with this.collection.where({isAnswer: true}) , It returns an empty array. In fact, when I try just to return the entire collection object, I seems that it isn't any model in it's array of models. So, I'm suspecting that I'm doing something wrong about inserting new models to the collection.

How can I be sure that there is models in my collection, and that I returning the right way the specified model? Any ideas?

Answer 1

The code looks correct, except for one thing: you're not actually adding the new Answer model to the collection. Try using collection.add inside the addAnswer method:

this.collection.add(newAnswer);