Javascript 使用backbone.js时键盘选项卡导航已断开

选项卡导航中断，因为render将替换DOM元素

主干渲染方法设计用于处理整个视图的标记，而不仅仅是更改内容

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

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

例如：

启动

---

应用程序创建2个待办事项，制表符指向第一个待办事项，按空格键标记已完成。然后试着用tab键转到下一个字段，而不是转到下一个TODO，这样您就回到了“需要做什么”输入：（

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

它为所有没有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
  });
}

---

问题是复选框在更新后会失去焦点；您只需重新聚焦更改的项。不要在更改事件上调用

render

。创建新函数（更新？）这并不能取代HTMLentirely@CoryDanielson但是我必须自己操作DOM，这是主干网试图解决的问题……好吧，我认为您可以监视模型上的

change

事件，提取ID，然后从中聚焦。我认为您不需要额外的数据；

lastFocused

可以吗e根据现有数据推断，不是吗？如果您发布一些当前代码，我很乐意提供一个示例。主干并不旨在简化DOM交互。它更像是一个代码组织/流库。如果您不想接触DOM，Ember可能适合您。但有很多方法可以解决此问题。您可以如果要知道要做什么，请重新渲染“完成”TODO，然后使用隐藏的值重新关注它。您应该创建一个模板，其中包括TODO的文本框以及隐藏在屏幕外的done模板。当您将其标记为done时，您只是在同一TODO项目上切换一个类。TODO周围的表单标记可能也很有用。