7

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') 容器中。

但我想每隔几秒钟从服务器和视图中自动重新加载集合。任何帮助，将不胜感激。

4

1 回答 1

12

您现在还需要两件事：

第一：告诉你的视图在集合发生变化时更新。在您看来，这可能是您的初始化函数的修订版本。

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方法，该方法已经是您的骨干网的依赖项。

于 2013-03-15T04:21:38.113 回答