How to save images when flashing images when rendering backbone?

Question

I use Backbone.js as a frame, and in my opinion I have several small images (garbage can delete, icon, etc.). And when the view re-displays these images.

I solved this with large images, creating a new view of everything that I do not want to use - and without causing them to be rendered. But I was wondering if there is another way to do this without breaking my mind into a bunch of pieces?

This is the general format in which I view my views:

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

And then I attach them to the div by:

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

My template might look like

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

Answer 1

Instead of binding the change event to your render method, you can bind change to the onChange function. Then in the onChange handler you can determine exactly what needs to be updated and leave everything else as it is.

I used this approach when I created a view for a collection: I did not want the entire list to be re-displayed when one item changed. Instead, I displayed once when the item was first inserted, and then processed specific change events as needed.