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

Rahul Akolkar rahul.akolkar at gmail.com
Fri Mar 11 22:30:51 EST 2011


Hi Bill,

Glad you're OK (I've no idea if you're close to the coast or not).

Inline.

On Fri, Mar 11, 2011 at 9:54 PM, Bill Keese <bill at dojotoolkit.org> wrote:
> Your description looks good, you've gotten rid of the global
> variables.  I'll check over the patch in the next week.
<snip/>

Cool.


> 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.
<snap/>

Yup, that is the idea. We're not connecting widgets directly here. But
we are allowing the ref to be specified as relative to another
widget's ref in the model. In other examples, the data binding parent
is an enclosing widget. This is meant to accomodate cases where that
may not be true.


> 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>
>
<snip/>

Yes, they're the same. To be most performant, I was looking at ways
where users could be explicit about the refs (whether absolute,
relative etc.) and also if I may use the T word on this list, how
tooling may come about prompting for these ref values. I envision a
selection of this nature:

 * expr:...   (calls d.getObject)
 * rel:...     (relative to enclosing widget's ref)
 * widget:... (relative to specified widget's ref, also dot-separated,
               first token is widget id, rest is relative bit)

Cheers,
-Rahul


> 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


More information about the dojo-contributors mailing list