从 riot.js 中的 child 标签获取数据

Question

我想创建这样的标签

<mytag>
<p class={ hide: doEdit }>
        <a class="icon1" onmousedown={ startEdit }></a>
        <input type="text" value={ opts.value } readonly/>      
</p>
<p class={ hide: !doEdit }>
        <a class="icon2 onmousedown={ endEdit }></a>
        <input name="editfield" type="text" value={ opts.value }/> 
</p>
this.doEdit = false
startEdit(e){
    this.doEdit = true
    this.update()
}
endEdit(e){
    this.doEdit = false
    opts.value = this.editfield.value // this does not change opts.value, unfortunately
    this.update()
}
</mytag>

如果它有用，我可以像这样使用它

var mydatamodel = {"input1":"email","input2":"name"}
<mytag value={ mydatamodel.input1 }></mytag>
<mytag value={ mydatamodel.input2 }></mytag>

不幸的是，这似乎不起作用。 mydatamodel.xy 没有更新，我不能给 opts.value 赋新值（没有例外，opts.value 根本不会改变它的值）。

根据 children 中 "editfield" 的新值更新 parents 模型的好方法是什么？

可以使用 this.mytag[i].editfield 访问数据。但这对于较大的表单来说不是好的解决方案。我还尝试使用自定义事件并在 child 标记中触发它。但是，我还没有找到合适的通用解决方案来更新 parent 标签中的模型。这种方法导致了一些像 "this.mytag[i].editfield" 那样笨拙的方法。

有没有一种方法可以创建 child 标签，这样就可以编写

<mytag value={ mydatamodel.input1 }></mytag>

其中 mydatamodel.input1 在 child 标签中更改后立即更新？

感谢您的想法。

Answer 1

通过属性设置回调：

<my-tag
  title={ globalModel.input1.title }
  val={ globalModel.input1.val }
  onendedit={ endEdit1 }></my-tag>

然后通过回调传回值。

endEdit (e) {
  this.doEdit = false
  if (opts.onendedit)
    opts.onendedit(this.editfield.value)
}

看来加个外标签比较好。 See detail on plunkr

您可能也对 RiotControll 感兴趣。这是 Riot.js 的一种 Flux 解决方案，仅供参考。

更新：通过评论重写信息后的答案。

从 riot.js 中的 child 标签获取数据

Get data from child tag in riot.js

riot.js