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.
248 lines (229 loc) • 7.97 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>MVC Test for dynamic label and calculating totals</title>
<style type="text/css">
@import "css/app-format.css";
@import "../../../dijit/themes/claro/claro.css";
.cell { width: 30%; display:inline-block; }
</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 model;
require([
'dojo/parser',
'dojo/ready',
"dojox/mvc/getStateful",
'dojox/mvc/at',
'dijit/form/TextBox',
'dijit/form/Button',
'dojox/mvc/Group',
'dojox/mvc/Repeat',
'dojox/mvc/Output'
], function(parser, ready, getStateful, at){
// Order data
orderData = {
"Serial" : "111",
"First" : "",
"Lab" : "TEST",
"Last" : "last",
"Email" : "email",
"Age" : "33"
};
// Initial sum data
sumData = {
"one" : 1,
"two" : 2,
"three" : 3,
"four" : 4,
"total" : 10
};
// Initial repeat sum data
sumRepeatData = {
"list" : [
{"item" : 1},
{"item" : 2},
{"item" : 3},
{"item" : 4}
],
"total" : 10
};
sumValuesConverter = {
format: function(value){
console.log("in sumValuesConverter format value ="+value);
value = value || 0;
return value;
},
parse: function(value){
console.log("in sumValuesConverter parse value ="+value);
recomputeTotal();
return value;
}
};
ageLabelConverter = {
format: function(value){
console.log("in ageLabelConverter format value ="+value);
if(!value){
return "Enter Age";
}else{
return "Enter "+value+"'s age";
}
},
parse: function(value){
console.log("in ageLabelConverter parse value ="+value);
return value;
}
};
sumRepeatValuesConverter = {
format: function(value){
console.log("in sumRepeatValuesConverter format value ="+value);
value = value || 0;
recomputeRepeatTotal();
return value;
},
parse: function(value){
console.log("in sumRepeatValuesConverter parse value ="+value);
return value;
}
};
ready(function(){
parser.parse();
recomputeTotal();
});
// Old api
//summodel = mvc.newStatefulModel({ data : sumData });
//sumrepeatmodel = mvc.newStatefulModel({ data : sumRepeatData });
//model = mvc.newStatefulModel({ data : order });
// new Api
summodel = getStateful(sumData );
sumrepeatmodel = getStateful(sumRepeatData);
model = getStateful(orderData);
});
function recomputeTotal() {
require([
"dijit/registry",
"dojox/mvc/at"
], function(registry, at){
var total = 0;
var wone = parseInt(registry.byId("oneInput").get("value")) || 0;
var wtwo = parseInt(registry.byId("twoInput").get("value")) || 0;
var wthree = parseInt(registry.byId("threeInput").get("value")) || 0;
var wfour = parseInt(registry.byId("fourInput").get("value")) || 0;
total = wone + wtwo + wthree + wfour;
var wtotal = registry.byId("totalOutput");
wtotal.set("value", total);
});
};
function recomputeRepeatTotal() {
require([
"dijit/registry",
"dojox/mvc/at"
], function(registry, at){
var total = 0;
for(var i=0;i<sumrepeatmodel.list.length;i++){
console.log("sumrepeatmodel.list[i].item = "+sumrepeatmodel.list[i].item);
var item = parseInt(sumrepeatmodel.list[i].item) || 0;
total = total + item;
}
var wtotal = registry.byId("totalrepeatOutput");
wtotal.set("value", total);
});
};
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div id="wrapper">
<div id="header">
<div id="navigation">
</div>
<div id="headerInsert">
<h2>MVC Test for dynamic label and calculating totals</h2>
</div>
</div>
<div id="main">
<div id="leftNav"></div>
<div id="mainContent">
<h4>Update Age label with first name when it is set.</h4>
<div data-dojo-type="dojox.mvc.Group"
data-dojo-props="target: model">
<div class="row">
<label class="cell" for="firstInput">Enter first name:</label>
<input class="cell" id="firstInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at('rel:', 'First')">
</div>
<div class="row">
<label class="cell" for="lastnameInput">Enter last name:</label>
<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at('rel:', 'Last')">
</div>
<div class="row">
<label class="cell" for="emailInput">Enter email:</label>
<input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at('rel:', 'Email')">
</div>
<div class="row">
<label data-dojo-type="dojox.mvc.Output" class="cell" for="ageInput"
data-dojo-props="value: at('rel:', 'First').direction(at.from).transform(ageLabelConverter)"></label>
<input class="cell" id="ageInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at('rel:', 'Age')">
</div>
</div>
<br/>
<h4>Update total when any of the fields are changed.</h4>
<div data-dojo-type="dojox.mvc.Group"
data-dojo-props="target: summodel">
<div class="row">
<label class="cell" for="oneInput">Item one:</label>
<input class="cell" id="oneInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at('rel:', 'one').transform(sumValuesConverter)">
</div>
<div class="row">
<label class="cell" for="twoInput">Item two:</label>
<input class="cell" id="twoInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at('rel:', 'two').transform(sumValuesConverter)">
</div>
<div class="row">
<label class="cell" for="threeInput">Item three:</label>
<input class="cell" id="threeInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at('rel:', 'three').transform(sumValuesConverter)">
</div>
<div class="row">
<label class="cell" for="fourInput">Item four:</label>
<input class="cell" id="fourInput" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at('rel:', 'four').transform(sumValuesConverter)">
</div>
<div class="row">
<label class="cell" for="totalOutput">Total:</label>
<div class="cell" id="totalOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at('rel:', 'total')"></div>
</div>
<br/>
<h4>Update total when any of the fields are changed - Using a Repeat.</h4>
<div id="outergroupId" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: sumrepeatmodel">
<div id="repeatId" data-dojo-type="dojox.mvc.Repeat"
data-dojo-props="children: at('rel:', 'list')">
<div data-dojo-type="dojox.mvc.Group"
data-dojo-props="target: at('rel:${this.index}')">
<div class="row">
<label class="cell" for="input${this.index}">Item ${this.index}:</label>
<input class="cell" id="input${this.index}" data-dojo-type="dijit.form.TextBox"
data-dojo-props="value: at('rel:', 'item').transform(sumRepeatValuesConverter)">
</div>
</div>
</div>
<div class="row">
<label class="cell" for="totalrepeatOutput">Total:</label>
<div class="cell" id="totalrepeatOutput" data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at('rel:', 'total')"></div>
</div>
</div>
<br/>
<br/>
Model:
<button id="reset" type="button" data-dojo-type="dijit.form.Button"
data-dojo-props="onClick: function(){model.set(orderData);summodel.set(sumData);sumrepeatmodel.set(sumRepeatData);}">Reset</button>
</div></div></div>
</body>
</html>