Backbone, selectively render parts in template

I am listing products as table rows, each row contains input fields for specifying the quantity of products.

I made a Fiddle for it here, http://jsfiddle.net/kroofy/4jTa8/19/

As you can see, after the input in the Qty field have been made, the whole row render again. And because of that the focus of the input field will be lost开发者_如何学运维, which is not good if you want to input more than just one digit, or tab between input fields.

What would be the most elegant way to solve this?

I would handle this by setting model.set({qty: _qty}, {silent: true}) and then updating the non-input fields with this.$.

As an alternative to the silent treatment: rather than listening for change events, listen for change:qty and change:sellPrice and have a method that updates just the HTML that needs updating within this.$, rather than re-rendering the DOM object and breaking your focus.

Either way, your comment about "selective updating" on the fiddle is certainly the right way to go.

(this.$ is a backbone hack to jQuery that restricts all selectors to search only within the DOM of the View's element. The element doesn't even need an ID or class; it just needs to exist and the View maintains a handle to it. It's incredibly useful.)

i built a plugin for backbone called Backbone.ModelBinding that may be able to help in this situation. my plugin allows you to update portions of a view with data from a model, when the model changes.

i've forked / updated your fiddle to show it in action: http://jsfiddle.net/derickbailey/FEcyF/6/

i removed the binding to the model change. i've also added id attributes to the inputs of the form to facilitate the plugin (the attribute that the plugin uses is configurable, though). and lastly, i've added a data-bind attribute to the sell price total td.

you can get the plugin here: http://github.com/derickbailey/backbone.modelbinding/

hope that helps

FWIW: my plugin is an automated version of what Elf is suggesting. I've written code exactly like he is describing, numerous times, which is where the plugin came from. I just got tired of writing that code by hand :)