TAB keyboard moves when using backbone.js

Question

TAB navigation breaks because render replaces the DOM element.

The main line rendering method is designed to work with the markup of the whole view and not only with the change of material ...

Considering the following - I correctly installed tabindex in the html tags to indicate the order of the tabs. - I move from field to field using TAB on the keyboard. - I get attached to the change change call event when the state of the model ever changes as follows: this.model.bind ('change', this.render); - I’m changing something in the field and tab to the next one (which causes the model change event)

Does anyone have a solution for this without explicit code checking all changed properties and without replacing the trunk (since this is not an option in the current project)

Example:

Launch the TODO application creating 2 TODOs, a tab in the first TODO and print space to mark it done. Then try moving to the next field, instead of moving to the next TODO, you will return to what you need to do: (

Answer 1

Here is the solution I ended up with: -

It adds a generated identifier for all elements that do not have an identifier, these identifiers will be the same for the model in the same state.

render: function(x) { var html = this.options.template(this.model.toJSON()); var focused = window.document.activeElement.id; //Get the focused element this.el.innerHTML = html; this.decorate(); if (focused) $('#' + focused).focus(); //Focus if previously focused prior to innerHTML return this; }, decorate: function() { var i = 0; var idPrefix = 'ENTER PREFIX HERE' this.$el.find('*').each(function() { if (!this.id) this.id = idPrefix + ((++i).toString(36)); //Add id if none exists }); }