Function bindDiffUpdate

Updates a HTML element based on diffs on an object.

// Wrap an object
const o = Rx.object({ name: `Jane`, ticks: 0 });
const b = bindDiffUpdate(`#test`, o, (diffs, el) => {
 // el = reference to #test
// diff = Array of Changes, 
//  eg [ { path: `ticks`, value: 797, previous: 0 } ]
 for (const diff of diffs) {
   if (diff.path === `ticks`) el.textContent = `${diff.previous} -> ${diff.value}`
 }
})

// Eg. update field
o.updateField(`ticks`, Math.floor(Math.random()*1000));
Copy

If initial is provided as an option, this will be called if source has an initial value. Without this, the DOM won't be updated until the first data update happens.

bindDiffUpdate(el, source, updater, { 
 initial: (v, el) => {
   el.innerHTML = v.name;
 }
})
Copy