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

Bill Keese bill at dojotoolkit.org
Fri Mar 11 21:54:56 EST 2011


Your description looks good, you've gotten rid of the global variables.  I'll
check over the patch in the next week.

I don't understand the benefit for the last syntax in your mail though:

 <input data-dojo-type="dijit.form.TextBox" id="serialInput"
        data-dojo-props="ref: 'widget:orderGroup.SerialNumber'"></input>

Why would you want to connect one widget directly to another widget?   I
thought the idea was that everything is coordinated through the model.

Also don't understand why your patch has an expr:... syntax for ref nodes:

   <input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox"

                    data-dojo-props="ref: 'expr:model.Email'"></input>



Couldn't that just be?

<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox"

                    data-dojo-props="ref: model.Email"></input>

On Sat, Mar 12, 2011 at 8: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/08860ac0/attachment-0001.htm 


More information about the dojo-contributors mailing list