How to force dijit/form/TextBox to update the variable bound to it immediately - binding does not work as expected

Question

I have an

<input id="myTextBox" data-dojo-type="dijit/form/TextBox" data-dojo-props="value: at(model, myValue)" />

When I try to copy the value from model.myValue to another input (e.g. by

window.setInterval(
  function() { document.getElementById("theOtherInput").value = model.myValue; }, 1000); 

I notice, that the value of myTextBox isn't synchronized with model.myValue until the <input> of myTextBox lost focus. I.e. - theOtherInput won't be updated unless I leave the input field myTextBox.

How to force dojo to synchronize the input with the bound variable with every keystroke? I thought that this should have been the default behavior or at least it should be possible with little effort, but I don't find the right attribute to do it. Any ideas?

The main problem for me is, when I submit the form by the enter key, the model.myValue has still the value before the input myTextBox got the focus. (and I don't want a hack with setInterval - I just want to have dojo doing its job of synchronizing the input with the model)

Answer 1

The closest you can get is setting intermediateChanges property to true and attach an onChange event. Something like this:

<input id="myTextBox" data-dojo-type="dijit/form/TextBox" 
       data-dojo-props="intermediateChanges: true"
       data-dojo-attach-event="onChange: _myOnChange"
       data-dojo-props="value: at(model, myValue)" />

Now, inside your widget, the _myOnChange function will run with each valuable keystroke or if the content is changed.

_myOnChange: function(newValue){
  console.log(newValue);
  document.getElementById("theOtherInput").value = newValue;
}