2012-04-12 17 views
6

का संदर्भ खो देता है मैं बैकबोन द्वारा संचालित एक ऐप स्थापित कर रहा हूं। मुझे एक "सरल-सरल" समस्या का सामना करना पड़ रहा है, जहां मेरे पास "संदेश" नामक एक मॉडल है, जिसे "संदेश सूची" कहा जाता है, और "संदेश दृश्य" और "संदेशसूची दृश्य" नामक दृश्य।बैकबोन संग्रह - संग्रह को फ़िल्टर करना और प्रस्तुत करना मूल unfiltered संग्रह

संदेशसूची दृश्य कोड संदेशसूची प्रस्तुत करता है। मेरे पास 4 टॉगल बटन हैं जो संदेश लिस्ट व्यू दिखाते हैं। फ़िल्टर बटन "सभी", "सक्रिय", "ध्वजांकित" और "अनदेखा" होते हैं। "सभी" पृष्ठ लोड पर प्रारंभिक फ़िल्टर है। जब कोई उपयोगकर्ता "ध्वजांकित" फ़िल्टर दबाता है, तो केवल ध्वज वाले संदेश == 1 दिखाई देना चाहिए। जब "ऑल" फिर से दबाया जाता है, तो सभी संदेश फिर से दिखने चाहिए।

जिस समस्या में मैं दौड़ रहा हूं, और मेरे डिज़ाइन में समस्या यह है कि जब मैं फ़िल्टरस्ट्रिंग के आधार पर संग्रह फ़िल्टर करता हूं, तो मूल संपूर्ण संग्रह का संदर्भ खो जाता है। इसलिए, जब "ऑल" फिर से दबाया जाता है, तो संदेश खो गए हैं।

मैं रीढ़ में ऐसा करने का सबसे अच्छा तरीका जानने के लिए उत्सुक हूँ ...

यहाँ सेटअप कोड है ...

var messageListView = new MessageListView({collection: messageList}); 

यहाँ MessageListView कोड है ...

MessageListView = Backbone.View.extend({ 

    initialize : function() { 

     this.collection.on("add", function(model) { 
      var view = new MessageView({model: model}); 
      $("div.cameras").prepend(view.render().el); 
     }); 

     this.collection.on("remove", function(model) { 
      var ID = model.id; 
      $("#message-" + ID).parent("div.message").remove(); 
     }); 

     this.collection.on("reset", function(models) { 
      $("div.cameras").empty(); 
      models.each(function(message) { 
       var view = new MessageView({model: message}); 
       $("div.cameras").prepend(view.render().el); 
      }); 
     }); 

    }, 

    filterMessages : function(filterString) { 
     var filtered = this.collection.filter(function(model){ 

      if (filterString == "all") 
      { 
       return true; 
      } 
      else if (filterString == "active") 
      { 
       return model.get("ignore") == "0"; 
      } 
      else if (filterString == "ignore") 
      { 
       return model.get("ignore") == "1"; 
      } 
      else if (filterString == "flag") 
      { 
       return model.get("flag") == true; 
      } 

     }); 
     this.collection.reset(filtered); 
    }, 
+0

मैं दोनों सवाल-जवाब, धन्यवाद लोग upvoted। ओपी के लिए सिर्फ एक संकेत: मैं संग्रह फ़िल्टर में फ़ंक्शनिंग फ़ंक्शन (ओं) को रखूंगा, न कि दृश्य। एमवीसी दुनिया, "फैट मॉडल, पतला नियंत्रक" कह रही है। बैकबोन में, दृश्य नियंत्रक के रूप में कार्य करता है। और तथ्य यह है कि बैकबोन के संग्रह में अंडरस्कोर के कार्य हैं, उस दिशा में एक संकेत है। – DjebbZ

उत्तर

10

जब आप फोन

this.collection.reset(filtered) 

आप पुराने डेटा को फेंक रहे हैं और इसे नए डेटा से बदल रहे हैं।

इसके बजाय आप क्या करना चाहते हैं, फ़िल्टर के नतीजे रखने के लिए अंतरिम 'संग्रह' (सरणी या बैकबोन.कोलेक्शन) होना चाहिए और यह है कि आप अपने संदेशों को प्रतिपादित करने के लिए 'डेटा स्रोत' के रूप में उपयोग करते हैं डोम।

कुछ तरीके हैं जो आप कर सकते हैं।

  1. बस फ़िल्टर के [सरणी] आउटपुट को हर मामले में (सभी 'मामले सहित) में प्रस्तुत करें - लेकिन उस परिणाम को मूल संग्रह में वापस न खिलाएं।
  2. फ़िल्टर मैसेज फ़ंक्शन के परिणाम प्राप्त करने के लिए दूसरा संग्रह बनाएं, और उसमें से एक को फिर से प्रस्तुत करें, अपना मूल संग्रह बरकरार रखें।
4

आप Backbone.CollectionView उपयोग कर सकते हैं, जो आप visibleModelsFilter विकल्प का उपयोग निर्दिष्ट करने के लिए जो संग्रह में मॉडल वर्तमान में दिखाई दे रहे हैं अनुमति देता है।

सेटअप कोड ...

var messageListView = new MessageListView({ 
    collection: messageList, 
    modelView : MessageView 
}); 

MessageListView कोड ...

MessageListView = Backbone.CollectionView.extend({ 

    filterMessages : function(filterString) { 
     if (filterString == "all") { 
      this.setOption("visibleModelsFilter", null); 
     } 
     else if (filterString == "active") { 
      this.setOption("visibleModelsFilter", function(thisModel) { 
       return model.get("ignore") == "0"; 
      }); 
     } 
     else if (filterString == "ignore") { 
      this.setOption("visibleModelsFilter", function(thisModel) { 
       return model.get("ignore") == "1"; 
      }); 
     } 
     else if (filterString == "flag") { 
      this.setOption("visibleModelsFilter", function(thisModel) { 
       return model.get("flag") == true; 
      }); 
     } 
    } 

}); 
संबंधित मुद्दे