0

我想创建一个这样的标签

<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 根本不会改变它的值）。

根据孩子中“编辑字段”的新值更新父母模型的好方法是什么？

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

是否有一种方法可以以可以编写的方式创建子标签

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

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

谢谢你的想法。

4

1 回答 1

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

添加外部标签似乎更好。在 plunkr 上查看详细信息

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

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

于 2015-11-14T06:44:58.900 回答