किसी आइटम को backbone.js संग्रह में सम्मिलित करना

Question

क्या कोई नया मॉडल आइटम backbone.js Collection के बीच में डालने का एक सीधा तरीका है और फिर सही स्थिति में नया आइटम शामिल करने के लिए संग्रह के View को अद्यतन करें?

मैं किसी सूची से आइटम जोड़ने/हटाने के लिए नियंत्रण पर काम कर रहा हूं। प्रत्येक सूची आइटम का अपना Model और View है, और मेरे पास पूरे संग्रह के लिए View भी है।

प्रत्येक आइटम दृश्य में Duplicate बटन है जो आइटम के मॉडल को क्लोन करता है और उसे क्लिक किए गए आइटम के नीचे इंडेक्स स्थिति पर संग्रह में डाल देता है।

संग्रह में आइटम डालने से सीधा था, लेकिन मुझे संग्रह दृश्य को अपडेट करने का तरीका पता लगाना मुश्किल हो रहा है। मैं कुछ इस तरह की कोशिश कर दिया गया है:

ListView = Backbone.View.extend({ 
    el: '#list-rows', 
    initialize: function() { 
     _.bindAll(this); 
     this.collection = new Items(); 
     this.collection.bind('add', this.addItem); 
     this.render(); 
    }, 
    render: function() { 
     this.collection.each(this.addItems); 
     return this; 
    }, 
    addItem: function (item) { 
     var itemView = new ItemView({ model: item }), 
      rendered = itemView.render().el, 
      index = this.collection.indexOf(item), 
      rows = $('.item-row'); 

     if (rows.length > 1) { 
     $(rows[index - 1]).after(rendered); 
     } else { 
     this.$el.append(rendered); 
     } 
    } 
} 

इस कार्यान्वयन तरह का काम कर रहा है, लेकिन मैं अजीब कीड़े हो रही है जब मैं एक नया आइटम जोड़ने। मुझे यकीन है कि मैं उनको हल कर सकता हूं, लेकिन ...

मेरे सिर में एक आवाज है जो मुझे बताती है कि ऐसा करने का एक बेहतर तरीका है। मैन्युअल रूप से यह पता लगाने के लिए कि नया ItemView कहां डालना है वास्तव में हैकी - संग्रह दृश्य को पहले से संग्रह को पुन: प्रस्तुत करने के बारे में नहीं पता होना चाहिए?

कोई सुझाव?

Answer 1

सामान्य तरीके से मैं कर रहा हूं ListView फ़ंक्शन में प्रत्येक ItemView प्रस्तुत करें। तब मैं सिर्फ render कार्य करने के लिए add घटना बाँध, इस तरह:

ListView = Backbone.View.extend({ 
    el: '#list-rows' 
    , initialize: function() { 
    _.bindAll(this); 
    this.collection = new Items(); 
    this.collection.bind('add', this.render); 
    this.render(); 
    } 
    , render: function() { 
    this.$el.empty(); 
    var self = this; 
    this.collection.each(function(item) { 
     self.$el.append(new ItemView({ model: item }).render().el); 
    }); 
    return this; 
    } 
} 

हर आप this.collection.add(someModel, {at: index}) फोन, देखने तदनुसार फिर से रेंडर किया जाएगा।

Answer 2

मुझे नहीं लगता कि नया तत्व जोड़ते समय पूरे संग्रह को पुन: प्रस्तुत करना सबसे अच्छा समाधान है। यह सही जगह पर नई वस्तु डालने से धीमा है, खासकर अगर सूची लंबी है।

इसके अलावा, निम्नलिखित परिदृश्य पर विचार करें। आप अपने संग्रह में कुछ आइटम लोड करते हैं, और फिर आप n और आइटम जोड़ते हैं (मान लें कि उपयोगकर्ता "अधिक लोड करें" बटन क्लिक करता है)। ऐसा करने के लिए आप विकल्पों में से एक के रूप में add: true पास करने वाली fetch() विधि को कॉल करेंगे। चूंकि डेटा सर्वर से वापस प्राप्त होता है, 'एड' ईवेंट n बार निकाल दिया जाता है और आप अपनी सूची n बार फिर से प्रस्तुत करना समाप्त कर देंगे।

मैं वास्तव में अपने प्रश्न में कोड का एक संस्करण का उपयोग कर रहा है, यहाँ 'जोड़ें' घटना के लिए मेरी कॉलबैक है:

var view, prev, prev_index; 
view = new ItemView({ model: new_item }).render().el; 
prev_index = self.model.indexOf(new_item) - 1; 
prev = self.$el.find('li:eq(' + prev_index + ')'); 
if (prev.length > 0) { 
    prev.after(view); 
} else { 
    self.$el.prepend(view); 
} 

तो, अनिवार्य रूप से मैं सिर्फ :eq() jQuery चयनकर्ता का उपयोग कर रहा बजाय हो रही आपके द्वारा किए गए सभी तत्वों को कम स्मृति का उपयोग करना चाहिए।