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

根据孩子们中“editfield”的新值更新父母模型有什么好办法？

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

是否有一种方法可以创建子标记，以便可以编写

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

如果mydatamodel.input1在子标记中发生更改后会立即更新？

感谢您的想法。

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中的子标记中获取数据

1 个答案: