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

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

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

1 个答案: