binds_update

binds_update

Bind expressions with element properties.

Features: customizable, javascript expression, minimal DOM changed with caching

binds_update(root = document, options);

options: {
  attr: "data-bind",
  consume: false,
  reflect: "data-bond",
  implicit: "html",
  separator: ";",
  binder: ":",
  compiler: (expr) => eval(`(self, context) => ${expr}`),
  visibility: false,
  remember: true,
  reset: false,
  extensions: {},
}

Expression types:

html
text
value
checked
context
hidden
visible
if
class-[name]
attr-[name]
var-[name]

The default placeholder

• expression compiler is eval

Examples

<div data-bind="1 + 1"></div>
⇓
<div data-bond="1 + 1">2</div>

<div data-bind="class-dark: ui.theme == 'dark'" class="view"></div>
⇓
<div data-bond="class-dark: ui.theme == 'dark'" class="view dark"></div>

<!-- consume: true --> 
<div data-bind="text: 'hello'.toUpperCase()"></div>
⇓
<div>HELLO</div>