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似乎也可以工作，因为它从服务器获得更新列表，在控制台中看起来很好（具有更新的内容）。我也看到了“我们得到了回应！”在控制台中。但是，它唯一拒绝做的就是直观地更新视图。

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

欢迎所有提示！

Answer 1

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

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

值得注意的是，不需要直接调用render函数。相反，您可以从轮询方法中调用fetch，并让视图绑定到集合的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);

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

1 个答案: