Backbone js auto обновить/перезагрузить коллекцию с сервера и обновить представление с помощью коллекции

Question

Новое на макете, пожалуйста, принесите мой не очень красивый базовый код javascript.

Это мой код

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); 

Этот код работает. И я могу загрузить всех студентов в контейнер $ ('# students').

Но я хотел бы автоматически перезагружать коллекцию с сервера и просмотра каждые несколько секунд. Любая помощь будет оценена по достоинству.

Answer 1

Теперь нужно еще две вещи:

Первое: Скажите ваш взгляд на обновление, когда коллекция изменяется. Это может быть пересмотренная версия вашей функции инициализации в вашем представлении.

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

это обновит ваше представление, когда новый элемент будет добавлен в вашу коллекцию. Примечание: это будет перерисовывать весь раздел #students. Лучше, если вы напишете отдельный метод, который будет просто вводить новый элемент DOM.

Во-вторых: Вам нужен способ получения новых данных с сервера. Как только вы его получите, вы просто добавите их в свою коллекцию. Вы можете использовать fetch() методы вашей коллекции как:

collection.fetch(); 

или вы можете вручную вводить, если вы получили их с помощью немагистрального Ajax звонков:

collection.add(newData); 

Как вы хотели задержать несколько секунд между показом каждой загрузки и показа, вы можете использовать метод debounce из библиотеки подчёркивания, которая уже является зависимостью для вашего позвоночника.