Auto Detect change of DOM with RactiveJS

Question

I'm using RactiveJS for making a big form who change values of field automatically.

A little plunkr for example => http://plnkr.co/edit/eONFQFLl6d2g7gdVcfM6?p=preview

When I change the first select, the second is updated but the value stay the older. On my project, I don't have juste 2 select but maybe ten with a lot of options and changes when we select differents values.

It's possible to update automatically all value with actual options ?

Answer 1

I found a solution. Trigger all change events (not just the select input) with jQuery and make a updateModel().

For exemple

$('*').on('change', function(){ setTimeout(function(){ ractive.updateModel(); }, 0); });

Answer 2

You can do the same thing with ractive.observe :

var ractive = new Ractive({
  el: 'container',
  template: '#template',
});

ractive.observe('*', function(){ 
  setTimeout(function(){ ractive.updateModel(); })
});

http://plnkr.co/edit/t4CZRa6FWIdmMQhLqAKo?p=preview

See http://docs.ractivejs.org/latest/observers for more info on using keypaths and wildcards to tailor your observe.