[dojo-contributors] Watchables, data bindings, and get/set

Kris Zyp kzyp at dojotoolkit.org
Wed Mar 3 17:46:42 EST 2010


I wanted to propose having a pattern of providing the ability to monitor
stateful objects in dojo with a watch() method. The watch method would
be based on Mozilla's Object.prototype.watch [1]:
obj.watch(propertyName, callback); // monitor a property
or
obj.watch(callback); // monitor any property change for that object
The two primary types of objects that I would like to be able to monitor
are widgets and data store objects. We have recently discussed using a
different data/object store approach whereby data store objects could be
provide a consistent set of methods, and watch() could certainly be one
of them. We could also easily add watch to dijit._Widget and deliver
notifications to listeners for any attribute changes. The ability to
watch an object would be discerned with feature detection (the presence
of obj.watch), but would hopefully be available at least on all widgets
(although user objects could implement this ability as well).

One of the primary motivations for this design, is would enable building
functionally reactive "live" templating engines or data-bindings on top
of Dojo. The concepts of functional reactive design (or data-bindings)
have been demonstrated in other projects like Flex, Flapjax [2], and Fin
[3]. There recently has been interest expressed in developing a template
language with these type of data-binding capabilities that could run on
Dojo, where one could write something like:
<div>${obj.foo}</div>
or
<div>${obj.get("foo")}</div>

And the variable/object property would be evaluated when the template is
executed, and the templating engine would then automatically "watch" the
obj's foo property for any changes and automatically rerender the
template when the value changes. This is a powerful concept because it
can remove a significant amount of user code for event propagation and
rerendering.

I think another beneficial pattern for clarity of code with code-based
attribute access would be using get()/set() pattern for code-controlled
property access. We have discussed this before, but I think this is much
clearer the current widget attr() that handles both gets and sets.
watch()/get()/set() would make a clear easy-to-use pattern for
interacting with widgets.

[1]
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Object/watch
[2] http://www.flapjax-lang.org/
[3] http://ajaxian.com/archives/fin-self-updating-template-language

-- 
Thanks,
Kris



More information about the dojo-contributors mailing list