Come posso impedire alle immagini di lampeggiare durante il rendering della vista Backbone?

Question

Sto usando Backbone.js come framework e, a mio modo di vedere, ho alcune piccole immagini (un cestino per cancellare, un'icona, ecc.). E quando la vista restituisce nuovamente queste immagini.

Ho risolto questo problema con immagini più grandi creando una nuova vista per tutto ciò che non desidero flashare e non attivandole per il rendering. Ma mi stavo chiedendo se c'è un altro modo per farlo senza scomporre la mia visione in un mucchio di pezzi?

Questo è il formato generale sono il rendering le mie opinioni in:

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

}); 

E poi li attribuisco ad un div da:

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

mio modello potrebbe essere simile

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

Answer 1

Invece di vincolare l'evento change al metodo render, è possibile associare change a una funzione onChange. Quindi, all'interno del gestore onChange, è possibile capire esattamente cosa deve essere aggiornato e lasciare tutto il resto così com'è.

Ho usato questo approccio quando costruisco una vista per una raccolta: non volevo che l'intera lista venisse nuovamente visualizzata quando un singolo elemento è cambiato. Invece, ho eseguito il rendering una volta quando l'elemento è stato inserito per la prima volta, quindi ho gestito eventi di modifica specifici secondo necessità.