javascript - 如何轮询更新 Backbone 下划线模板？

Question

我正在使用 Javascript Backbone 框架和标准下划线模板引擎构建一个网站。我有一个 ListView ，在第一页加载时加载。由于该列表的内容可能会在服务器端发生变化，因此我想每两秒更新一次该列表。我尝试通过添加 setInterval 调用来做到这一点:

var OpenTicketListView = Backbone.View.extend({
    el: '#the-id-in-the-template',
    render: function() {
        var that = this;
        var tickets = new TicketColection();
        tickets.fetch({
            success: function(openTickets){
                console.log('WE GOT A RESPONSE!');
                var template = _.template($('#my-template').html(), {tickets: tickets.models});
                that.$el.html(template);
            }
        });
    }
});

var openTicketListView = new OpenTicketListView();

router.on("route:home", function() {
    openTicketListView.render();
    assignedTicketListView.render();
});

setInterval(openTicketListView.render, 2000);

这个设置似乎几乎可以工作。 ListView 第一次渲染得非常好。 setInterval 似乎也有效，因为它从服务器获取更新的列表，这些列表在控制台中看起来不错(包含更新的内容)。我还看到“我们得到了回应!”在控制台中。但是，它唯一拒绝做的事情就是以视觉方式更新 View 。

有人知道我在这里可能做错了什么吗？我在这里有什么愚蠢的事？我怎样才能调试这个？

欢迎提供所有建议!

Answer 1

问题是，当您从 setInterval 调用该函数时，render 函数内的 this 的值会丢失。解决这个问题的一种方法是 bind函数的上下文:

setInterval(openTicketListView.render.bind(openTicketListView), 2000);

值得注意的是，不需要直接调用render函数。相反，您可以从轮询方法调用 fetch，并将 View 绑定(bind)到集合的 sync 事件，然后重新渲染自身。像这样的事情:

var OpenTicketListView = Backbone.View.extend({
    el: '#the-id-in-the-template',
    initialize: function() {
        this.listenTo(this.collection, 'sync', this.render);
        this.collection.fetch();
    },
    render: function() {
        console.log('WE GOT A RESPONSE!');
        var template = _.template($('#my-template').html(), {tickets: this.collection.models});
        that.$el.html(template);
    }
});

var tickets = new TicketColection();
var openTicketListView = new OpenTicketListView({ collection: tickets });

setInterval(tickets.fetch.bind(tickets), 2000);