[dojo-contributors] Presenting the data binding kitchen sink ...

Christophe Jolif cjolif at gmail.com
Sat Mar 12 07:40:12 EST 2011


Rahul,

I think this would be a great addition to dojo to be able to easily bind
data model properties to widget properties in a similar fashion other
frameworks are doing and so all of this look really promising to me. However
I see that for iteration on bindings you are relying on a "repeater" widget.
This will work fine for "form" like applications where you are iterating
over each of data item outside of the widget itself but what about more
complex widgets that directly take the full data set either as a list or a
hierarchy as input and need to bind specific part of the widget to specific
model properties? As far as I can see your patch does not address directly
this use-case, however maybe the data model and the binding mechanism you
are proposing is flexible enough for other developers to leverage it on more
complex widgets? I must admit I don't have time to dig into this to check if
that is possible but I think it would be useful at some point to extend this
mechanism to other widgets and thus we should make sure to go into a path
that will allow that later on.

Examples:
-a chart might want to bind its y-values to field revenue in the data items
and its bar colors to the field profit.
-a grid might want to bind columns values to particular properties in a data
item

 Is that something you foresee feasible with your model later on?

Thanks,
--
Christophe

On Sat, Mar 12, 2011 at 12:11 AM, Rahul Akolkar <rahul.akolkar at gmail.com>wrote:

> Hi all,
>
> A new day brings programmatic data binding support (part of Bill &
> Ben's feedback), the ability to disconnect the data binding contextual
> hierarchy from the DOM (related to Ben's feedback) and some other
> improvements. I have:
>
>  * Incorporated most feedback from Bill and Ben in other thread (thanks
> again).
>  * Added support for programmatic data bindings and the ability to
> provide a ref as a model node object.
>  * Added support for specifying widget-relative refs for data bindings
> (more in item 2d below).
>  * Added a simple programmatic example to the tests and a kitchen sink
> example (probably won't be common to see a mix of this sort in apps,
> but its good to know and test that data bindings can work in harmony
> regardless of how they are specified).
>  * Reworked tests to use new parser syntax, leaving one suitably
> labeled test in old format for kicks as well as for regression
> testing.
>
> To illustrate the data binding feature in dijit, I've pasted some
> samples from the test cases (these are available in the refreshed
> patch on #12314) in this message:
>
> 1. -- Programmatic data binding --
>
> a. Creation or page load time, simple example
>
>  // Function below shows programmatic creation
>  // of data-bound dijits - "mainContent" is ID of parent div
>  function addBoundDijits(){
>    var model = dijit.newStatefulModel({ data: { first: "John", last: "Doe"
> }});
>
>    var fn = new dijit.form.TextBox({id: "fn", ref: model.first});
>    fn.placeAt(dojo.byId("mainContent"));
>    fn.startup();
>
>    var ln = new dijit.form.TextBox({id: "ln", ref: model.last});
>    ln.placeAt(dojo.byId("mainContent"));
>    ln.startup();
>  }
>
> b. Manipulating refs later, from my "toggle" example (grep patch for
> "simple-programmatic.html", the below happens when one hits the toggle
> button):
>
>  // Function below shows programmatic update
>  // of data-bound dijit refs
>  function toggleRefs(){
>    var fn = dijit.byId("fn"), ln = dijit.byId("ln");
>    var ref = fn.get("ref");
>    fn.set("ref", ln.get("ref"));
>    ln.set("ref", ref);
>  }
>
> 2. -- Declarative data binding (not showing models here) --
>
> a. Direct data binds (or absolute references to model nodes):
>
>  <input data-dojo-type="dijit.form.TextBox" id="serialInput"
>         data-dojo-props="ref: model.SerialNumber"></input>
>
> b. Relative data binds (see <input>s, which are relative to parent):
>
>  <div data-dojo-type="dijit.mvc.Group" data-dojo-props="ref: model">
>    <div class="row">
>      <label for="serialInput">Order #:</label>
>      <input data-dojo-type="dijit.form.TextBox" id="serialInput"
>             data-dojo-props="ref: 'Serial' "></input>
>    </div>
>    <div class="row">
>      <label for="nameInput">Name:</label>
>      <input data-dojo-type="dijit.form.TextBox" id="nameInput"
>             data-dojo-props="ref: 'Name' "></input>
>    </div>
>  </div>
>
> c. Breaking out of enclosing widget's nested binding context if it
> makes sense (serialInput has relative ref, name breaks out --
> fictitious example):
>
>  <div data-dojo-type="dijit.mvc.Group" data-dojo-props="ref: model">
>    <div class="row">
>      <label for="serialInput">Order #:</label>
>      <input data-dojo-type="dijit.form.TextBox" id="serialInput"
>             data-dojo-props="ref: 'Serial' "></input>
>    </div>
>    <div class="row">
>      <label for="nameInput">Name:</label>
>      <input data-dojo-type="dijit.form.TextBox" id="nameInput"
>             data-dojo-props="ref: otherModel.Name"></input>
>    </div>
>  </div>
>
> d. Anchoring data binding context to another widget by ID where the
> enclosing widget may not have the right data binding context or the
> widget may not be stationary in the DOM (example binds textbox to the
> 'SerialNumber' model node as specified, relative to the data binding
> of the widget with ID "orderGroup"):
>
>  <input data-dojo-type="dijit.form.TextBox" id="serialInput"
>         data-dojo-props="ref: 'widget:orderGroup.SerialNumber'"></input>
>
> Ofcourse, all of these flavors work together in concert if need be.
>
> I think the code is ready for another look, I'd appreciate more
> feedback. Have at it ;-)
>
> -Rahul
> _______________________________________________
> dojo-contributors mailing list
> dojo-contributors at mail.dojotoolkit.org
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-contributors
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-contributors/attachments/20110312/5d2aee15/attachment-0001.htm 


More information about the dojo-contributors mailing list