如何在渲染Backbone视图时防止图像闪烁

How do I keep images from flashing when rendering Backbone view?

本文关键字：图像 闪烁 视图 Backbone      更新时间：2023-09-26

我使用Backbone.js作为框架，在我的视图中，我有一些小图像（一个要删除的垃圾桶、一个图标等）。当视图重新渲染时，这些图像会闪烁。

我用更大的图像解决了这个问题，为我不想闪烁的东西创建了一个新的视图，而不是触发它们进行渲染。但我想知道，在不把我的观点分解成一堆碎片的情况下，是否还有其他方法可以做到这一点？

这是我在中呈现视图的通用格式

window.SomeView = Backbone.View.extend({
    initialize: function() {                
        this.model.bind('change', this.render, this);
        this.template = _.template($('#view-template').html());
    },
    render: function(){
        var renderedContent = this.template(this.model.toJSON());
        $(this.el).html(renderedContent);
        return this;
    },
    events: { 'click .delete' : delete },
    delete: function(ev){
        //do delete stuff here
    },
});

然后我通过以下方式将它们附加到div中：

var newView = new PopupItemImgView({model: someModel});
        $('#styleimage').append(newView.render().el);

我的模板可能看起来像

<script type="text/template" id="view-template">
<%
    print('Content content - <img src="images/delete.gif" class="delete">');
%>
</script>

您可以将change绑定到onChange函数，而不是将change事件绑定到您的render方法。然后，在onChange处理程序中，您可以准确地找出需要更新的内容，并保持其他内容不变。

我在为集合构建视图时使用了这种方法：我不希望在单个元素发生更改时重新渲染整个列表。相反，我在第一次插入元素时渲染了一次，然后根据需要处理特定的更改事件。

相关文章：