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 に答える