Two Way Binding an Input with RactiveJs

Question

I'm just starting out with RactiveJs and having a few troubles with observing an input tag, which is initially rendered with a value.

I'm observing a the input field below.

 {{#invoices:i}}
     <input class="text-center" type="date"" value="{{***date_modified***}}">
 {{/invoices}}

Using the below

 ractive.observe({
        '*.*.date_modified': function(newValue, ***oldValue***, keyPath) { 
               // some function 
         };
 });

The challenge is the first time "date_modified" is the changed "oldValue" is undefined. The second time "date_modified" is changed "oldValue" correctly returns the old value.

The "date_modified" is initially rendered with a value (e.g., 22/11/2014), which I suspect might be the issue as all of the examples leave the input blank when the template I

Any thoughts?

Thanks

Answer 1

By default, observers 'initialise' with an undefined oldValue - the idea is that it's often easier to write a single function that does something with the current state of the app, regardless of how that state came to be, rather than some initial setup logic plus a separate change handler of some kind.

But you can disable that first call by passing an init: false option, like so:

ractive.observe('foo', handler, { init: false });

However there's a bit more to it than that in this case. It turns out you've uncovered a bug - pattern observers can't have a * as the first key. You'd need to use invoices.*.date_modified instead of *.*.date_modified. An issue has been raised on GitHub - thanks!