dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
143 lines (133 loc) • 5.87 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Step 3 of test for Controllers, uses an EditModelRefController.</title>
<style type="text/css">
@import "../css/app-format.css";
@import "../../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../../dojo/dojo.js"></script>
<script type="text/javascript">
var ctrl;
require([
'dojo/parser',
'dojo/ready',
'dojox/mvc/getStateful',
'dojox/mvc/EditModelRefController',
'dojox/mvc/parserExtension',
'dijit/form/TextBox',
'dijit/form/Button',
'dojox/mvc/Group',
'dojox/mvc/Output'
], function(parser, ready, getStateful, EditModelRefController){
// Initial data
var data = {
"id" : "360324",
"FullName" : "Mr. John Doe",
"Email" : "jdoe@example.com",
"AddressLine1" : "123 Valley Rd.",
"AddressLine2" : "",
"City" : "Cary",
"State" : "NC",
"Zip" : "27513"
};
// To move from ModelRefController to use EditModelRefController, need to require EditModelRefController.
// and on the new call use sourceModel instead of model.
//
// EditModelRefController adds support for reset() and commit(), so buttons were added to show Reset and Save (commit).
//
// With holdModelUntilCommit set to true, you will want to bind the output address for the group to
// "target: at(ctrl,'sourceModel')", if holdModelUntilCommit is false you can stay with model, sourceModel will also work.
//
// You can change holdModelUntilCommit to false to see how that works, updates will be reflected into the Verify section
// immediately upon focus changes, and Reset will revert back to the last saved model.
// The EditModelRefController constructor sets sourceModel to the results of the getStateful call which will take json data and make it Stateful
transformAddress2Class = {
format: function(value){
if(value && value.trim().length > 0){
return "row" // if AddressLine2 is set return row for class
}
return "hiderow"; // if AddressLine2 is not set return hiderow for class
}
};
ctrl = new EditModelRefController({sourceModel: getStateful(data), holdModelUntilCommit: true});
parser.parse();
});
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div id="wrapper">
<div id="main">
<div>
<h2>Step 3 of test for Controllers, uses an EditModelRefController with holdModelUntilCommit: true.</h2>
<h2>Enter Shipping Address</h2>
</div>
<div class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at(ctrl,'model')">
<div class="fullrow">
<label class="cell" for="nameInput">Full Name:</label>
<input class="cell" id="nameInput" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'FullName')">
</div>
<div class="fullrow">
<label class="cell" for="AddressLine1Input">Address Line1:</label>
<input class="cell" id="AddressLine1Input" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'AddressLine1')">
</div>
<div class="fullrow">
<label class="cell" for="AddressLine2Input">Address Line2:</label>
<input class="cell" id="AddressLine2Input" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'AddressLine2')">
</div>
<div class="fullrow">
<label class="cell" for="cityInput">City:</label>
<input class="cell" id="cityInput" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'City')">
</div>
<div class="fullrow">
<label class="cell" for="stateInput">State:</label>
<input class="cell" id="stateInput" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'State')">
</div>
<div class="fullrow">
<label class="cell" for="zipInput">Zipcode:</label>
<input class="cell" id="zipInput" data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'Zip')">
</div>
</div>
<br/>
<div class="row">
<button class="buttoncell" id="reset" type="button" data-dojo-type="dijit/form/Button" data-dojo-props="onClick: function(){ ctrl.reset(); }">Reset</button>
<button class="buttoncell" id="commit" type="button" data-dojo-type="dijit/form/Button" data-dojo-props="onClick: function(){ ctrl.commit(); }">Save</button>
</div>
<br/>
<div>
<h2>Verify the shipping address, will not update until saved with holdModelUntilCommit true.</h2>
</div>
<div class="fullrow" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at(ctrl,'sourceModel')">
<div class="fullrow">
<div class="boldnamecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'FullName')"></div>
</div>
<div class="fullrow">
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'AddressLine1')"></div>
</div>
<div class="hiderow" data-mvc-bindings="class: at('rel:', 'AddressLine2').direction(at.from).transform(transformAddress2Class)">
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'AddressLine2')"></div>
</div>
<div class="fullrow">
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'City')">${this.value},</div>
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'State')"></div>
<div class="namecell" data-dojo-type="dojox/mvc/Output"
data-dojo-props="value: at('rel:', 'Zip')"></div>
</div>
</div>
</div>
</div>
</body>
</html>