Làm cách nào để giữ hình ảnh không nhấp nháy khi hiển thị chế độ xem Đường trục?

Question

Tôi đang sử dụng Backbone.js làm khung và theo quan điểm của tôi, tôi có một vài hình ảnh nhỏ (thùng rác có thể xóa, biểu tượng, v.v.). Và khi xem lại, những hình ảnh này sẽ nhấp nháy.

Tôi đã giải quyết vấn đề này bằng hình ảnh lớn hơn bằng cách tạo chế độ xem mới cho mọi thứ tôi không muốn flash - và không kích hoạt chúng để hiển thị. Nhưng tôi đã tự hỏi nếu có một cách khác để làm điều này mà không phá vỡ quan điểm của tôi thành một loạt các mảnh?

Đây là định dạng chung tôi render quan điểm của tôi trong:

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 
    }, 

}); 

Và rồi tôi đính kèm chúng vào một div bởi:

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

mẫu của tôi có thể trông như

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

Answer 1

Thay vì ràng buộc sự kiện change vào phương thức render của bạn, bạn có thể liên kết change đến một hàm onChange. Sau đó, trong trình xử lý onChange, bạn có thể tìm ra chính xác những gì cần được cập nhật và để mọi thứ khác như hiện trạng.

Tôi đã sử dụng phương pháp này khi tôi xây dựng chế độ xem cho bộ sưu tập: Tôi không muốn toàn bộ danh sách hiển thị lại khi một phần tử đơn lẻ thay đổi. Thay vào đó, tôi trả lại một lần khi phần tử được chèn lần đầu tiên và sau đó xử lý các sự kiện thay đổi cụ thể khi cần thiết.