4

TAB 导航中断，因为 render 替换了 DOM 元素。

主干渲染方法旨在与整个视图的标记一起使用，而不仅仅是更改内容......

鉴于以下情况 - 我在 html 标签上正确设置了 tabindex 以指定 tab 顺序。- 我使用键盘上的 TAB 从一个字段导航到另一个字段。- 当模型状态改变时，我绑定到调用渲染的更改更改事件：- this.model.bind('change', this.render); - 我将某个字段和选项卡中的某些内容更改为下一个（触发模型更改事件）

有没有人在没有显式代码检查所有更改的属性并且没有替换主干的情况下解决这个问题（因为这不是当前项目的选项）

例子：

启动TODO 应用程序创建 2 个 TODO，Ta​​b 到第一个 TODO 并按空格标记为已完成。然后尝试跳到下一个字段，而不是转到下一个 TODO，而是回到需要完成的输入:(

4

1 回答 1

2

这是我最终得到的解决方案：-

它为所有没有 id 的元素添加一个生成的 id，这些 id 对于处于相同状态的模型将是相同的。

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
  });
}
于 2013-05-17T11:30:04.007 回答