使用backbone.js时，键盘选项卡导航失效

Keyboard TAB navigating broken when using backbone.js

本文关键字：选项 导航 失效 键盘 backbone js 使用      更新时间：2023-09-26

TAB导航中断，因为渲染取代了DOM元素。

主干渲染方法被设计成与整个视图的标记一起工作，而不仅仅是改变的东西…

给定以下内容我在html标签上正确设置了tabindex以指定制表符顺序。-我通过使用键盘上的TAB键从一个字段导航到另一个字段。-当模型状态发生变化时，我绑定到change change事件调用render:-this.model。绑定(‘改变’,this.render);-我在字段和tab中更改了一些内容(这会触发模型更改事件)

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

的例子:

启动TODO应用程序创建2个TODO, tab到第一个TODO，按空格标记完成。然后尝试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
  });
}
相关文章：