javascript - 如何使用 svelte 在表格中实现箭头导航

Question

给定一个带有 data.selected=[i,j] 和 keydown 事件监听器的表格，以根据键盘箭头更改坐标，插入的方式和位置表达式 if (i===selected[0] && j = selected[1]) node.focus()?

<table on:keydown='arrow(event.keyCode)'>
  {{#each rows as row, i}}
  <tr>
    {{#each row as val, j}}
    <td tabIndex=1>{{val}}</td>
    {{/each}}
  </tr>
  {{/each}}
</table>

主处理程序可以更改 selected 的索引，但没有对节点本身的引用。

我尝试在模板和 if block 中插入表达式，但出现错误。

Answer 1

我可能会这样做 — 将数据属性放在单元格本身上，然后使用 querySelector 找到要在其上调用 .focus() 的节点。

Here's a demo in the REPL :

<table ref:table>
  {{#each rows as row, i}}
    <tr>
      {{#each row as val, j}}
      <td tabIndex=1>
        <input
          data-row='{{i}}'
          data-col='{{j}}'
          on:keydown='arrow(this, event.keyCode)'
          on:focus='set({selected: [i, j] })'
          bind:value='val'>
      </td>
      {{/each}}
    </tr>
  {{/each}}
</table>

<script>
  export default {
    oncreate () {
      this.observe( 'selected', s => {
        this.refs.table.querySelector( `[data-row="${s[0]}"][data-col="${s[1]}"]` ).focus();
      });
    },
    methods: {
      arrow ( node, code ) {
        if ( code < 37 || code > 40 ) return;

        let i = +node.dataset.row;
        let j = +node.dataset.col;

        const rows = this.get( 'rows' );
        const row = rows[i];

        if ( code === 37 ) j = Math.max( 0, j - 1 );
        if ( code === 39 ) j = Math.min( j + 1, row.length - 1 );
        if ( code === 38 ) i = Math.max( 0, i - 1 );
        if ( code === 40 ) i = Math.min( i + 1, rows.length - 1 );

        this.set({ selected: [ i, j ] });
      }
    }
  };
</script>