使用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
显然也没有什么区别。
如何获取商品,以便可以在阵列中对其进行更改?
答案 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