Question

我试图优化在页面上呈现的可搜索Backbone Collection的呈现。我的目标是尽可能快地向用户显示缓存搜索，以防止显着的“滞后”问题。他们正在打字。

虽然我当前的解决方案使用setTimout来异步显示视图中的渲染项目，但是一旦用户删除搜索框中的所有文本（即，渲染600多个项目），再次渲染完整集合就变得很麻烦。

例如，我在页面加载时的初始渲染如下：

render: function(collection) {
    this.el_html = [];

    this.$el.html('');
    collection = collection || this.collection;

    if (collection.length > 0) {
        (function(that) {
            collection.each(function(item) {
                that.renderItemHtml(item);
            });
        })(this);

        this.$el.html(this.el_html);
    } else {
        this.$el.html($('#noItemsTemplate').html());
    }

    return this;
},

而不是将项目附加到当前视图（用于优化），我只是抓取我的renderItemHtml中的html：

 renderItemHtml: function(item) {
    var itemView = new this.itemView({
        model: item
    });
    this.el_html.push(itemView.render().el);
},

在我绘制视图并且用户执行搜索之后，我使用以下渲染（以避免前面提到的UI延迟）：

renderFiltered: function(collection) {
    var numActiveItems = 0,
        totalItems = 0,
        numItemsDisplayed = 0;

    collection = collection || this.collection;
    collection.comparator = 'name';
    collection.sort();

    //get the total number of active items
    numActiveItems = this.collection.where({
        active: true
    }).length;
    totalItems = numActiveItems;
    numItemsDisplayed = collection.toArray().length;
    if (collection.length == this.collection.length) {
        return this;
    }
    this.$el.html('');
    if (numItemsDisplayed < totalItems) {
        this.$el.append('<div>Displaying ' + numItemsDisplayed + ' out of ' + totalItems + '</div>');
    }

    if (collection.length > 0) {
        this.searchNum++;
        this.renderItems(collection.models, 0, this.searchNum);
    }
}

这些视图中的每一个都是异步添加的，如下所示：

renderItem: function(item) {
    var itemView = new this.itemView({
        model: item
    });

    this.$el.append(itemView.render().el);
},

现在，执行搜索时性能上升并不严重，因为这些集合的平均长度最多为400。但我关注的是渲染更大的收藏品。

所以我的问题：是否可以缓存渲染的视图＆el;当你要再次显示该搜索的结果时，将视图的$ el设置为缓存元素？我通过缓存HTML成功完成了这项工作，但没有附加到应该在集合中呈现的每个模型的事件。

当我使用以下内容渲染缓存的集合时：

this.$el.replaceWith(this.cache[search_query].el);

生成的html内容。$ el不显示存储在缓存元素中的内容，而是显示先前呈现的列表...即使缓存的元素似乎具有它最初具有的所有outerHTML，甚至事件（通过调试器查看时）。

但是，以下渲染完美，但缺少单个项目视图事件：

this.$el.append(this.cache[search_query].el);

此外，this.delegateEvents（）似乎只针对当前视图（即我的库视图而不是单个项目）。

您是否建议使用任何方法来缓存已渲染的已过滤元素，并在事件仍然存在的情况下重新渲染它们？

如果您需要更多代码/信息，请与我们联系。

提前致谢！

Backbone Collection - 缓存渲染的集合

0 个答案: