Function bindElement

Update a DOM element's field, attribute or CSS variable when source produces a value.

// Access via DOM query. Binds to 'textContent' by default
bind(readableSource, `#someEl`);

// Set innerHTML instead
bind(readableSource, someEl, { elField: `innerHTML` });

// An attribute
bind(readableSource, someEl, { attribName: `width` });

// A css variable ('--' optiona)
bind(readableSource, someEl, { cssVariable: `hue` });

// Pluck a particular field from source data.
// Ie someEl.textContent = value.colour
bind(readableSource, someEl, { sourceField: `colour` });

// Transform value before setting it to field
bind(readableSource, someEl, { 
 field: `innerHTML`, 
 transform: (v) => `Colour: ${v.colour}`
})
Copy

If source has an initial value, this is used when first bound.

Returns PipeDomBinding to control binding:

const bind = bind(source, `#someEl`);
bind.remove();     // Unbind
bind.remove(true); // Unbind and remove HTML element
Copy

If several fields need to be updated based on a new value, consider using bindUpdate instead.