javascript - 渲染主干 View 时如何防止图像闪烁？

Question

我使用 Backbone.js 作为框架，在我看来我有一些小图像(要删除的垃圾桶、图标等)。当 View 重新呈现这些图像时闪烁。

我已经通过为我不想闪烁的所有内容创建一个新 View 而不触发它们渲染来解决这个更大的图像。但我想知道是否有另一种方法可以在不将我的观点分解成一堆碎片的情况下做到这一点？

这是我呈现我的观点的一般格式:

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>

Answer 1

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

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