如何访问 RiotJS 中嵌套的每个循环中的项目

Question

使用 RiotJS，我正在尝试构建一个非常简单的 editable table。我能够像这样生成它：

<table-editor>
  <table>
    <thead>
      <tr>
        <th each="{ name, key in opts.columns }">{ name }</th>
        <th>
          <button onclick="{ add }"><i class="ais ai-plus"></i></button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr each="{ item in opts.items }">
        <td each="{ name, key in opts.columns }">
          <input type="text" onchange="{ onChange }" value="{ item[key] }">
        </td>
        <td>
          <button onclick="{ remove }">Remove</button>
        </td>
      </tr>
    </tbody>
  </table>

  <script>
    this.add = function (): void {
      const newItem = Object
        .keys(this.opts.columns)
        .reduce((i, key) => { i[key] = ''; return i; }, {});
      this.opts.items.push(newItem);
    };

    this.remove = function (e: RiotEvent): void {
      const { item } = e;
      const index = this.opts.items.indexOf(item);
      this.opts.items.splice(index, 1);
    };

    this.onChange = function (e: RiotEvent): void {
      const { item } = e;
      console.error(item, ' is column, not item... ');
      const index = this.opts.items.indexOf(item);
      // TODO: Update the item
    };
  </script>
</table-editor>

问题是 onChange 事件附带的 e.item 是列对象，而不是项目对象。这是因为嵌套的每个循环，但我该如何解决这个问题？当然没有 parent 上的项目 "up"，使用 parent.onChange 显然也没有区别...

如何获取项目以便在数组中更改它？

Answer 1

事实证明，在这种特殊情况下，我可以通过简单地将 onchange 事件移动到 table 行来解决它，如下所示：

<tr each="{ item in opts.items }" onchange="{ onChange }">
  <td each="{ name, key in opts.columns }">
   <input type="text" name="{ key }" value="{ item[key] }">
  </td>
  <td>
    <button onclick="{ remove }">Remove</button>
  </td>
</tr>

然而，出于某种我不明白的原因，这样做的副作用是我 e.item 现在 e.item.item... 意味着我的（完成）onChange 事件变成这样：

this.onChange = function (e: RiotEvent): void {
  const { item: { item }, target: { name, value } } = e;
  const index = this.opts.items.indexOf(item);

  tag.opts.items[index][name] = value;
};

如何访问 RiotJS 中嵌套的每个循环中的项目

How to access items in nested each loops in RiotJS

each

loops

riot.js