Backbone js从服务器自动刷新/重新加载集合,并使用集合更新视图

Question

Backbone的新手,请承担我不那么漂亮的主干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);

由于您希望在显示每个加载和显示之间延迟几秒钟,您可以使用下划线库中的去抖方法,该方法已经是主干的依赖项.