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

时间:2018-08-01 12:47:09

标签: loops each riotjs

使用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 个答案:

答案 0 :(得分:0)

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

static void Main()
{
    bool createdNew = true;
    using (Mutex mutex = new Mutex(true, "MyService.exe", out createdNew))
    {
        if (createdNew)
        {
            //new app
            MyService service = new MyService();

            //Launch as console application
            if (Environment.UserInteractive)
            {
                service.OnStartForConsole();

                if (service.IsServiceStartedSuccessfully)
                {
                     //wait for user to quite the application 
                      Console.ReadLine();
                    }
                }
                service.OnStopForConsole();
            }
            else
            {
                //Launching as windows service 
                ServiceBase[] ServicesToRun;
                ServicesToRun = new ServiceBase[]
                {
                   service
                };
                ServiceBase.Run(ServicesToRun);
            }
        }
        else
        {
            Process current = Process.GetCurrentProcess();
            foreach (Process process in Process.GetProcessesByName(current.ProcessName))
            {
                if (process.Id != current.Id)
                {
                    Console.WriteLine("Already started the proces.");
                    break;
                }
            }
        }
    }
}

但是,出于某种原因,由于某种原因,我不了解它的副作用是我<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