suggestion for "watching" objects

[acroyear]

While dirty-checking is considered by some to be passe (seems many think the future is in immutable objects blah blah - at present, I don't agree with them), the observe-js library from the polymer works pretty well when you aren't dealing with a very large object set. https://github.com/Polymer/observe-js

There's another library that will take your original pojo and wrap it up in one that creates setter/getters through Object.defineProperty and then fire Object.observe() style events when the setters are called, effectively replicating the O.o() api to some degree without the dirty-checking. https://medium.com/@mweststrate/object-observe-is-dead-long-live-mobservable-observe-ad96930140c5#.eww6t6jav - by default it is VERY ES6-centric in its examples code but there are some ES5 examples to work with I think. Haven't looked at that very deeply yet.

My first released app, SubFire (a jquerymobile client for Subsonic servers) uses observe-js. I created $.fn.extend() methods on the JQM widgets plus a general purpose one for the DOM, that allow one to attach an object/property-path and have it automatically set the value of the widget (or the content of the dom) and call any appropriate .refresh methods needed for JQM.

One could have "div id=fred /div", and object fred = { name: 'fred' }, and be able to
$('#fred').attach(fred, 'name')
So then if I do fred.name = 'Sam', the div content would update to Sam instead of fred.

[codepb]

Thanks, this is very interesting. I certainly would like to add watching of bound properties into the plugin. I would like to use native JavaScript as much as possible to do this as well.

There are a number of challenges that this poses, particularly the syntax for binding to an object when it is being 'watched'. I think the syntax at the moment for the plugin is still a bit clunky.

I think any watching of objects will have to come in a version 2, with a new syntax. My idea is to work very much like xaml and wpf bindings and allow json in any property in the template to allow you to bind values in any property without too much of a lengthy syntax. It would then allow you to apply modifiers to a binding, such as if it is two way, one way etc. In a simple, concise format.

[Floofies]

I use this in various webapps with my own Flux-based framework, which provides a "data watching" behavior via Differentia.js. I am not saying you should use my code at all, but rather this is a good example of how you can implement this behavior.

Flux provides a basic mechanism for firing events when data is interacted with. In my framework, when a change event gets fired, the incoming data is compared to old data to look for changes. Here's some example code showing how this is invoked:

function shouldComponentUpdate (nextState, oldState) {
  return FluxAxe.isDiff(oldState, nextState, component.defaultProps);
}

In this example, component.defaultProps is an Object representing the properties which are fed directly into an invocation of jQuery-Template, and is provided to the isDiff function as a search parameter. This means component.defaultProps will be used as the traversal target to differentiate properties in oldState and nextState. With this setup, I can simply specify which properties to "watch", and have jQuery-Template re-render if any of them change.

Anyways, this is only one example of how you can monitor Objects for changes. I hope it helps somehow.

[codepb]

Thanks, that is really useful. I think there are number of ways this could be achieved, and it's useful to evaluate them all as efficiency will make all the difference here.