3

我有一个从 URL 填充的集合：

var PeopleCollection = Backbone.Collection.extend({
model: Person,
url: '/hr/xml-home-3a.php'
});

它使用以下视图：

var PeopleView = Backbone.View.extend({
    tagName: 'ul',
    initialize: function () {
        this.collection = new PeopleCollection();
        this.collection.bind("reset", this.render, this);
        this.collection.fetch();
    },
    render: function () {
        this.collection.each(function (person) {
            var personView = new PersonView({
                model: person
            });
            this.$el.append(personView.render().el);
        }, this);
        return this;
    }
});

我的问题是，我希望此视图每 5 秒刷新一次，获取新提要并使用此新提要重新显示。

当然，我可以用 JS 重新加载页面本身，但我想知道它是否可以在 Backbone 中完成。

4

3 回答 3

3

您可以尝试以下解决方案。也可能有其他解决方法，但我尝试了以下方法。这将重新渲染子视图并将实例保存在数组中。当它每 5 秒刷新一次时，它将关闭以前的子视图并使用新的获取数据重新渲染它们。

var PeopleView = Backbone.View.extend({
    tagName: 'ul',
    initialize: function () {
        this.collection = new PeopleCollection();
        this.collection.bind("reset", this.render, this);
        this.collection.fetch();
    },
    render: function () {
        var self = this;
        this.childViews = [];
        this.collection.each(function (person) {
            var personView = new PersonView({
                model: person
            });
            this.childViews.push(personView);
            this.$el.append(personView.render().el);
        }, this);

        setTimeout(function(){
            self.reRender();
        }, 5000);

        return this;
    },
    reRender : function(){
        var self = this;
        this.collection.fetch({
            success : function(){
                _.each(self.childViews, function(view){
                    view.remove();
                    view.unbind();
                });

                self.childViews= [];
                self.render();
            }
        });        
    }
});
于 2013-06-13T19:26:03.917 回答
1

使用 setTimeout 进行新的集合获取是可以的。

但是，除非您确定集合中的所有模型在刷新时都会更改，否则重新渲染所有人员视图并不是最佳解决方案。

更好的方法是将每个人视图的渲染方法绑定到其相应集合模型中的更改（更改、添加、删除事件）。

如果您使用的是 Backbone 1.0，则 fetch 默认执行更新并触发添加、删除和更改事件。如果您 < 1.0，您将使用 fetch({update:true}) 来实现这一点。

于 2013-06-13T20:18:25.920 回答
1

我会选择事件驱动的解决方案。例如，在刷新提要后，您的集合应该触发一个事件，并且该事件应该由视图处理（例如处理。它应该调用“渲染”方法）。

此外，视图不应该刷新集合，它应该以完全相反的方式工作（集合应该刷新视图）。

于 2013-06-13T19:20:47.313 回答