スクロールでテーブル内の矢印ナビゲーションを実装する方法

Question

data.selected=[i,j]と​​イベントリスナを使用してキーボードの矢印に基づいて座標を変更するテーブルが与えられた場合、式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

私はおそらくそれをこのようなものだろう - 細胞自体にデータ属性を入れ、その後に.focus()を呼び出すためのノードを見つけるためにquerySelectorを使用します。

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>