如何使用 svelte 在 table 中实现箭头导航

Question

给定一个 table 和 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>

如何使用 svelte 在 table 中实现箭头导航

how to implement arrow navigation in table with svelte

javascript

dom

svelte