161 lines
6.0 KiB
HTML
161 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Data binding -- Ref kitchen sink example</title>
|
|
|
|
<script src="../../../dojo/dojo.js"
|
|
type="text/javascript"
|
|
djConfig="parseOnLoad: true, isDebug: true">
|
|
</script>
|
|
<style type="text/css">
|
|
@import "css/app-format.css";
|
|
@import "../../../dijit/themes/claro/claro.css";
|
|
</style>
|
|
<script type="text/javascript" >
|
|
dojo.require("dojox.mvc");
|
|
dojo.require("dojox.mvc.Group");
|
|
dojo.require("dijit.form.TextBox");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dojo.parser");
|
|
|
|
// Initial data
|
|
var order = {
|
|
"Serial" : "360324",
|
|
"First" : "John",
|
|
"Last" : "Doe",
|
|
"Email" : "jdoe@example.com",
|
|
"ShipTo" : {
|
|
"Street" : "123 Valley Rd",
|
|
"City" : "Katonah",
|
|
"State" : "NY",
|
|
"Zip" : "10536"
|
|
},
|
|
"BillTo" : {
|
|
"Street" : "17 Skyline Dr",
|
|
"City" : "Hawthorne",
|
|
"State" : "NY",
|
|
"Zip" : "10532"
|
|
}
|
|
};
|
|
|
|
// This example is an odd mix of everything, being the kitchen sink example :-)
|
|
|
|
// The dojox.mvc.StatefulModel class creates a data model instance, which will be
|
|
// shared by widgets being instantiated programmatically as well as
|
|
// declaratively
|
|
var model = dojox.mvc.newStatefulModel({ data : order });
|
|
|
|
// Here is programmatic data bound widget instantiation
|
|
function addBoundDijits(){
|
|
// Absolute ref, passed as object
|
|
var serial = new dijit.form.TextBox({id: "serialInput", ref: model.Serial});
|
|
serial.placeAt(dojo.byId("serialDiv"));
|
|
serial.startup();
|
|
|
|
// Relative refs, passed as strings
|
|
var fn = new dijit.form.TextBox({id: "firstnameInput", ref: "First"});
|
|
fn.placeAt(dojo.byId("firstnameDiv"));
|
|
fn.startup();
|
|
var ln = new dijit.form.TextBox({id: "lastnameInput", ref: "Last"});
|
|
ln.placeAt(dojo.byId("lastnameDiv"));
|
|
ln.startup();
|
|
}
|
|
|
|
dojo.addOnLoad(addBoundDijits);
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
<div id="wrapper">
|
|
<div id="header">
|
|
<div id="navigation">
|
|
</div>
|
|
<div id="headerInsert">
|
|
<h1>Data Binding</h1>
|
|
<h2>Ref kitchen sink example - all ways to specify refs, mixed bag on purpose.</h2>
|
|
</div>
|
|
</div>
|
|
<div id="main">
|
|
<div id="leftNav">
|
|
</div>
|
|
<div id="mainContent">
|
|
<!--
|
|
Following group shows first example of declarative usage. Its child
|
|
dijits are added programmatically.
|
|
Here, the ref points to the application space "model" variable (can
|
|
be any dot-separated expression).
|
|
-->
|
|
<div class="row" id="infoGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'model'">
|
|
<!-- The serial text box gets placed in div below programmatically -->
|
|
<div class="row" id="serialDiv">
|
|
<label class="cell" for="serialInput">Order #:</label>
|
|
</div>
|
|
<!-- The first and last name text boxes gets placed in corresponding
|
|
divs below, with a relative ref to data-bound parent (group) -->
|
|
<div class="row" id="firstnameDiv">
|
|
<label class="cell" for="firstnameInput">First:</label>
|
|
</div>
|
|
<div class="row" id="lastnameDiv">
|
|
<label class="cell" for="lastnameInput">Last:</label>
|
|
</div>
|
|
<!-- Here, we break out of any parent data binding association
|
|
by declaratively specifying a direct ref expression.
|
|
There is no necessity for DOM to match data structure even in
|
|
declarative ref specifications. -->
|
|
<div class="row" id="emailDiv">
|
|
<label class="cell" for="emailInput">Email:</label>
|
|
<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'expr:model.Email'"></input>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
Choose:
|
|
<button id="shipto" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', model.ShipTo);}">Ship To</button>
|
|
<button id="billto" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){setRef('addrGroup', model.BillTo);}">Bill To</button>
|
|
<br/>
|
|
<!--
|
|
Following group shows a declarative example of a ref thats relative
|
|
to another widget's ref. This is useful, for example, if the widget
|
|
may move its DOM location at some point.
|
|
Here, we're saying group's ref is relative to "infoGroup" widget's
|
|
ref and is located at the property "ShipTo" therein.
|
|
-->
|
|
<div class="row" id="addrGroup" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: 'widget:infoGroup.ShipTo'">
|
|
<!-- This is a relative ref, passed as a string -->
|
|
<div class="row">
|
|
<label class="cell" for="streetInput">Street:</label>
|
|
<input class="cell" id="streetInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Street'"></input>
|
|
</div>
|
|
<!-- Here, we are explicit that the string is a relative ref, which
|
|
is slightly more performant. -->
|
|
<div class="row">
|
|
<label class="cell" for="cityInput">City:</label>
|
|
<input class="cell" id="cityInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'rel:City'"></input>
|
|
</div>
|
|
<!-- Just goofing with whitespace in refs below, for robustness -->
|
|
<div class="row">
|
|
<label class="cell" for="stateInput">State:</label>
|
|
<input class="cell" id="stateInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: ' rel: State' "></input>
|
|
</div>
|
|
<div class="row">
|
|
<label class="cell" for="zipInput">Zipcode:</label>
|
|
<input class="cell" id="zipInput" data-dojo-type="dijit.form.TextBox"
|
|
data-dojo-props="ref: 'Zip' "></input>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
Model:
|
|
<button id="reset" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){model.reset();}">Reset</button>
|
|
</div></div></div>
|
|
<script type="text/javascript">
|
|
function setRef(id, addrRef) {
|
|
var widget = dijit.byId(id);
|
|
widget.set("ref", addrRef);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|