Javascript 渲染主干视图时,如何防止图像闪烁?
我使用Backbone.js作为一个框架,在我看来,我有一些小图片(一个要删除的垃圾桶,一个图标,等等)。当视图重新渲染时,这些图像会闪烁 我已经用更大的图像解决了这个问题,为我不想闪烁的所有东西创建了一个新的视图,并且没有触发它们进行渲染。但我想知道是否有另一种方法可以做到这一点,而不把我的观点分成一堆碎片 这是我渲染视图时使用的常规格式:Javascript 渲染主干视图时,如何防止图像闪烁?,javascript,jquery,backbone.js,Javascript,Jquery,Backbone.js,我使用Backbone.js作为一个框架,在我看来,我有一些小图片(一个要删除的垃圾桶,一个图标,等等)。当视图重新渲染时,这些图像会闪烁 我已经用更大的图像解决了这个问题,为我不想闪烁的所有东西创建了一个新的视图,并且没有触发它们进行渲染。但我想知道是否有另一种方法可以做到这一点,而不把我的观点分成一堆碎片 这是我渲染视图时使用的常规格式: window.SomeView = Backbone.View.extend({ initialize: function() {
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
处理程序中,您可以准确地找出需要更新的内容,并保持其他内容不变
我在为集合构建视图时使用了这种方法:我不希望在单个元素发生更改时重新呈现整个列表。相反,我在第一次插入元素时渲染了一次,然后根据需要处理了特定的更改事件。您能提供一个代码示例吗?我的假设是,您正在从dom中删除html,包括图像,然后重新添加它们。Mike,是的,这就是我从教程中学到的方法。我附上了一些代码。