बैकबोन जेएस ऑटो रीफ्रेश/सर्वर से पुनः लोड करें और संग्रह के साथ अपडेट अपडेट करें

Question

बैकबोन के लिए नया, कृपया मेरा सुंदर बैकबोन जावास्क्रिप्ट कोड न रखें।

यह मेरा कोड

var Schedule = Backbone.Model.extend({ 
    initialize: function() { 
     console.log("initializing model"); 
    } 
}); 

var ScheduleCollection = Backbone.Collection.extend({ 
    model: Schedule, 
    url: "<%=students_swimming_classschedules_path%>", 
    parse: function (resp) { 
     return resp; 
    }, 
}); 

var Schedules = Backbone.View.extend({ 
    initialize: function() { 
     console.log("initializing view"); 
     collection.on('add', this.render, this); 
     this.render(); 
    }, 

    render: function() { 
     for (var i = 0; i < collection.length; i++) { 
      s += "<tr><td>" + collection.models[i].get('account') + "</td><td>" + collection.models[i].get('status') + "</td></tr>"; 
     } 
     this.$el.html(s); 
    }, 
}) 

var schedules = new Schedules({ 
    el: $("#students") 
}); 

window.setInterval(function() { 
    collection.fetch(); 

}, 2000); 

इस कोड काम करता है। और मैं सभी छात्रों को $ ('# छात्र') कंटेनर में लोड कर सकता हूं।

लेकिन मैं सर्वर से संग्रह को फिर से लोड करना चाहता हूं और प्रत्येक कुछ सेकंड में दृश्य को पुनः लोड करना चाहता हूं। किसी भी सहायता की सराहना की जाएगी।

Answer 1

अब आप दो और चीजों की आवश्यकता:

पहले: आपके विचार बताएं अद्यतन करने के लिए जब संग्रह परिवर्तन है। यह आपके विचार में आपके प्रारंभिक कार्य का संशोधित संस्करण हो सकता है।

initialize : function(){ 
    console.log("initializing view"); 
    collection.on('add', this.render, this); 
    collection.on('reset', this.render, this); 
    this.render(); 
}, 

यह आपके संग्रह में नया आइटम जोड़ा जाने पर यह आपके दृश्य को ताज़ा कर देगा। नोट: यह पूरे #students अनुभाग को फिर से प्रस्तुत करेगा। यह बेहतर है कि यदि आप एक अलग विधि लिखते हैं जो सिर्फ नए आइटम को डीओएम इंजेक्ट करेगा।

दूसरा: आपको सर्वर से नया डेटा लाने के लिए कुछ तरीका चाहिए। जैसे ही आप इसे प्राप्त कर लेंगे, आप उन्हें अपने संग्रह में जोड़ दें। आप की तरह अपने संग्रह का fetch() तरीकों का उपयोग कर सकते हैं:

collection.fetch(); 

या, आप मैन्युअल इंजेक्षन कर सकते हैं कि आप उन्हें प्राप्त हो गया है, तो गैर रीढ़ ajax कॉल का उपयोग:

collection.add(newData); 

आप कुछ ही सेकंड में देरी करना चाहता था के रूप में प्रत्येक लोड और शो दिखाने के बीच, आप अंडरस्कोर लाइब्रेरी से debounce विधि का उपयोग कर सकते हैं जो आपकी रीढ़ की हड्डी के लिए पहले से ही निर्भरता है।