Is there a way to stop per character updates in Ractive?

Question

I would like to prevent Ractive from updating the DOM until after an iput field blur event. By default Ractive updates the DOM any time a character in typed into or removed from a field. Changing the field in question results in a metered API call, so reducing the number of calls is critical. I know I could display a field that is not part of the Ractive config.data, but that brinings in other issues.

Is this possible? I can't find anything in the Ractive docs.

Answer 1

It can be controlled via the lazy option, docs are here, which limits to change and blur events:

var ractive = new Ractive({
    template: '<input value="{{foo}}">',
    data: { foo: 'bar' },
    lazy: true
});

// will not fire as user is typing
ractive.on('change', function(){
      // only happens on exiting <input> or return if submit
      console.log('changed!')
})

The lazy option can also be specified per element, not just at the component level.

<input value="{{foo}}" lazy="true" />

You can also specify a debouncing timeout treshhold:

<input value="{{foo}}" lazy="1000" />