Backbone.js - 无法从集合中获取指定的模型

时间:2013-08-30 21:59:20

标签: javascript backbone.js

我目前正在学习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})的模型时,它返回一个空数组。事实上,当我尝试只返回整个集合对象时,我似乎并不是它的模型数组中的任何模型。所以,我怀疑我在将新模型插入集合方面做错了。

我怎样才能确定我的系列中有模型,并且我以正确的方式返回指定的模型?有什么想法吗?

1 个答案:

答案 0 :(得分:1)

代码看起来是正确的,除了一件事:你实际上并没有将新的Answer模型添加到集合中。尝试在addAnswer方法中使用collection.add

this.collection.add(newAnswer);