Backbone.js-無法從集合中獲取指定的模型

Question

我目前正在學習Backbone.js並喜歡它，我有點難以理解如何從集合中獲取模型。 事實是我不知道我是否在執行將新模型綁定到集合的正確方法。 這是我的代碼：

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

我有一個模型，一個集合和兩個視圖，一個視圖處理一段代碼（ answerView部分），另一個視圖添加答案（並處理集合部分）。 因此，當我嘗試使用this.collection.where({isAnswer: true})返回模型時，它將返回一個空數組。 實際上，當我嘗試返回整個集合對象時，似乎它不是模型數組中的任何模型。 因此，我懷疑在向集合中插入新模型時做錯了什么。

如何確定集合中有模型，並且以正確的方式返回指定模型？ 有任何想法嗎？

Answer 1

該代碼看起來正確，除了一件事：您實際上沒有在集合中添加新的Answer模型。 嘗試在addAnswer方法中使用collection.add ：

this.collection.add(newAnswer);