0

I want to create a tag like this

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

If it would have worked, i could have used it like

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

Unfortunately, this does not seem to work. mydatamodel.xy does not get updated, i cannot assign a new value to opts.value (there is no exception, opts.value simply won't change its value).

What would a good way be to update the parents model according to the new values of the "editfield" in the children?

It is possible to access the data using this.mytag[i].editfield. But this is no good solution for larger forms. I also tried using a custom event and trigger it in the child tag. However, i did not yet find a proper generic solution to update the model in the parent tag. This approach led to something clumsy as the "this.mytag[i].editfield"-way.

Is there a method to create the child tags in such a way that it is possible to write 

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

where mydatamodel.input1 is updated as soon as it changes in the child tag?

Thanks for your thoughts.

habakuck
  • 103
  • 1
  • 3

1 Answers1

1

Set the callback through an attribute:

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

Then send back the value through callback.

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

It seems better to add an outer tag. See detail on plunkr

You may have an interest on RiotControll, too. This is a kind of Flux solution for Riot.js, FYI.

Update: rewrote the answer after the information via comment.

Tsutomu Kawamura
  • 1,101
  • 9
  • 10
  • Thanks for your answer. But this does not help. There is no problem reading the model data in the Child, but setting the model to other values seems not to work from the child, so setting opts.value = newValue has no effect on the model. – habakuck Nov 15 '15 at 08:36
  • Could you show your whole example? Plunkr is a good place. http://riotjs.com/examples/plunker/?app=bug-reporter – Tsutomu Kawamura Nov 15 '15 at 08:38
  • Updated the answer. Take a look :-) – Tsutomu Kawamura Nov 15 '15 at 10:54
  • Thats already much better than anything I tried so far. Your approach works. Thank you very much for your support. – habakuck Nov 16 '15 at 16:36