I realize that this is totally out of the blue and not apropos to the subject of the discussions, but this work is *awesome*. Congrats, and keep up the great work!
On Mar 31, 2011, at 3:23 PM, Rahul Akolkar wrote:

Hi Sudoh-san,

Comments inline below.

2011/3/31 Akira Sudoh <asudoh at gmail.com>:
I've been interested in the proposed MVC support, particularly about the
data binding capability that allows syncing widget attributes to data model.
The application I'm working on has complex user interaction logic that
interconnects to application logic, so it provides a big benefit that change
in data model automatically reflected to (even multiple) widget(s), instead
of application code having to directly access to widgets.

Indeed :-)

Currently, the data binding capability via "ref" property in
dijit/_DataBindingMixin.js synchronizes one widget attribute, which is
"value". It works for most of form widgets. I'm wondering if that capability
can be extended so that attributes other than "value" can be synchronized,
too, so that we can use data binding capability for non-form widgets, too,
like menu bar item, drop down menu item, etc., so that state in application
can automatically be reflected to menu item UI, for example.

Right, we started with form widgets but most of the above are on the
roadmap. If you haven't seen this yet, please take a look at the rough
roadmap specified in this document (see Staging section):


Wanted to see if it makes sense... And if so, wanted to see what will be the
best way to define such extending data binding. Something I have in mind is:
data-dojo-props="refs: {label: dataModelForLabel, value: dataModelForValue}"
data-dojo-props="refs: {'*': dataModel}" (To synchronize all widget

Another way to think about this while maintaining ref semantics for
values is that labels have values too. For form widgets, one can
easily produce dynamic labels like so:

<label for="foo">
<span dojoType="dijit.mvc.Output" ref="model.foolabel"></span>
<input id="foo" dojoType="dijit.form.TextBox" ref="model.foo">

Now for menus etc., lets step through a number of patterns. To start
with, the simple functional equivalent of the above will be (not a
working example):

<div dojoType="dijit.Menu" ...>
<div dojoType="dijit.MenuItem" onClick="...">
<span dojoType="dijit.mvc.Output" ref="model.menu.items[0]"></span>
<div dojoType="dijit.MenuItem" onClick="...">
<span dojoType="dijit.mvc.Output" ref="model.menu.items[1]"></span>

Ofcourse, the above hardwires the number of menu items, so one may use
the more dynamic approach involving a repeat as below:

<div dojoType="dijit.Menu" ...>
<div dojoType="dijit.mvc.Repeat" ref="model.menu.items">
<div dojoType="dijit.MenuItem" onClick="...">
<span dojoType="dijit.mvc.Output" ref="${index}"></span>

Finally, a smarter data-bound menu may not even require the explicit
repeat above (am using a different type 'dijit.mvc.Menu' to explicitly
point out the addition of data binding capabilities below, but the
actual type may not need to change from 'dijit.Menu' at all):

<div dojoType="dijit.mvc.Menu" ref="model.menu">

The assumption for such a menu would be a specific topology at the
referenced model node (such as that obtained from an array).

All this and more is upcoming, glad to have you participate!


Best regards,
- Akria
Akira Sudoh
mailto:asudoh at gmail.com
dojo-contributors mailing list
dojo-contributors at mail.dojotoolkit.org

Search Discussions

Discussion Posts


Follow ups

Related Discussions

Discussion Navigation
viewthread | post
posts ‹ prev | 3 of 49 | next ›
Discussion Overview
groupdojo-contributors @
postedMar 31, '11 at 11:08a
activeApr 9, '11 at 8:21a



site design / logo © 2022 Grokbase