webreflection / wrist

Minimalistic utility for generic one/two ways data bindings.

wrist

An easy way to bind or react to properties change.

It also works with input elements and their value, checked, or disabled too.

const watcher = wrist.watch(
  // generic Object or DOM element
  generic,
  // the property name to watch
  'propertyName',
  // the callback that will trigger
  // only when property value changes
  function cb(propName, oldVal, newVal) {
    this === generic; // true
    propName;         // "propertyName"
  }
);

// to drop a watcher
watcher.unwatch();

// or via unwatch and same watch signature
wrist.unwatch(generic, 'propName', cb);

Each property can have more than one callback registered.

Dual bindings do not interfere with each other.

Live test page.

Related post.

Compatibility

IE9 Desktop, as well as IE9 Mobile in WP7 are the IE baseline.

Every Desktop browser works, and in Firefox case, even Firefox OS 1 does.

However, old stock browsers found in Android 2~4, WebOS, iOS 5 (OK, not stock but same bug) have a WebKit bug that won't make properties like input.value be configurable.

In these cases, other regular, non special attributes, would work, but that's kinda missing the point ow wrist.

If you need to support jurassic mobile browsers, please look elsewhere, apologies.

---

(C) 2017 Andrea Giammarchi - MIT Style License

wrist's Issues

No change detected with js-array

I try to watch an array in the JS to determine if there was a change, but It doesn't trigger with an array. With a normal string value there is no problem. But if just the content of the array is updated it doesn't observe the change. Is this broken, am I stupid or is this just not a feature?