2013-08-30 85 views
0

我目前正在學習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

代碼看起來是正確的,除了一件事情:你實際上並沒有將新的Answer模型添加到集合中。在addAnswer方法內嘗試使用collection.add方法:

this.collection.add(newAnswer); 
+0

謝謝,@McGarnagle!我現在感覺有點笨拙!使用collection.add做了訣竅,現在它就像一個魅力! +1爲官方文檔! –

相關問題