代码之家 › 专栏 › 技术社区 › Svish

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

riotjs each loops

Svish · 技术社区 · 6 年前

使用RiotJS,我试图构建一个非常简单的可编辑表。我可以这样生成它:

<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>

问题是 e.item 它和 onChange 事件是列对象,而不是项对象。这是因为每个循环都是嵌套的,但是我该如何解决这个问题呢?当然没有 parent 在要“向上”的项目上,使用 parent.onChange 显然也没什么区别。。。

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

1 回复 | 直到 6 年前

Svish 6 年前

结果是,在这种特殊情况下,我可以通过简单地将onchange事件移到表行来解决它,如下所示:

<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;
};

推荐文章

Keren · 如何使变量大1

1 年前

smg_08 · 使用for循环在pandas数据帧中进行筛选[重复]

1 年前

stats_noob · R: 记录某个“行为”发生的循环的索引?

2 年前

nickolakis · 基于R中的列名复制列

2 年前

khalid Morrshid · 循环语法C语言

2 年前

Onur · R中矩阵的循环

2 年前

Alex · 如何向嵌套字典json添加值?

2 年前

George carrick · 如何在R中检测时间序列数据中的缺失年份?

2 年前

CS Geek · 如何实现一个循环,其中:数字不能在输入的中间使用;他们最后一定要来?

2 年前

Klang · 我怎么做我自己的绳子。Split()和数组。Reverse()一个用户定义函数中的内置函数,用于反转给定字符串?

2 年前