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

Rahul Akolkar rahul.akolkar at gmail.com
Fri Mar 11 18:11:20 EST 2011


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