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.
266 lines (252 loc) • 12.8 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>MVC DOH Test</title>
<style>
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/tests/css/dijitTests.css";
@import "../css/app-format.css";
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css">
<!-- required: dojo.js -->
<script src="../../../../dojo/dojo.js" type="text/javascript" data-dojo-config="isDebug: 1, parseOnLoad: 0, async: 1"></script>
<script type="text/javascript" src="./helpers.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/parser",
"dojo/when",
"dojo/Stateful",
"dijit/registry",
"dijit/form/TextBox",
"dijit/form/NumberTextBox",
"dijit/form/ValidationTextBox",
"dijit/form/Button",
"dojox/mvc/Output"
], function(doh, parser, when, Stateful, registry){
model = new Stateful({
First: "John",
Last: "Doe",
Email: "jdoe@example.com",
Num: 3
});
function noParse(){
throw new Error();
}
readOnlyConverter = {
format: function(value){
return value === "2" || value === "3";
},
parse: noParse
};
relevanceConverter = {
format: function(value){
return value !== "0";
},
parse: noParse
};
numValidConverter = {
format: function(value){
return value !== "3" && !(value - 0 === 1);
},
parse: noParse
};
requiredConverter = {
format: function(value){
return value - 0 === 4;
},
parse: noParse
};
lastValidConverter = {
format: function(value){
return value !== "1";
},
parse: noParse
};
when(parser.parse(), function(){
doh.register("Check values and bindings", [{
name: "Initial",
runTest: function(){
var first1 = registry.byId("firstnameInput");
doh.f(first1.get("readOnly"), "readOnly should be false");
doh.t(first1.get("relevant"), "relevant should be true");
doh.t(first1.get("valid"), "valid should be true");
var addr1 = registry.byId("emailInput");
doh.f(addr1.get("readOnly"), "readOnly should be false");
doh.t(addr1.get("relevant"), "relevant should be true");
doh.f(addr1.get("required"), "required should be false");
doh.t(addr1.get("valid"), "valid should be true");
}
}, {
name: "TestFirstUpdate",
runTest: function(){
var first1 = registry.byId("firstnameInput");
first1.set("value", "0");
doh.f(first1.get("readOnly"), "readOnly should be false");
doh.f(first1.get("relevant"), "relevant should be false");
doh.f(first1.get("required"), "required should be false");
doh.t(first1.get("valid"), "valid should be true");
first1.set("value", "1");
doh.f(first1.get("readOnly"), "readOnly should be false for value = 1");
doh.t(first1.get("relevant"), "relevant should be true for value = 1");
doh.f(first1.get("required"), "required should be false for value = 1");
doh.f(first1.get("valid"), "valid should be false for value = 1");
first1.set("value", "2");
doh.t(first1.get("relevant"), "relevant should be true for value = 2");
doh.f(first1.get("required"), "required should be false for value = 2");
doh.t(first1.get("valid"), "valid should be true for value = 2");
doh.t(first1.get("readOnly"), "readOnly should be true for value = 2");
first1.set("value", "3");
doh.t(first1.get("readOnly"), "readOnly should be true for value = 3");
doh.t(first1.get("relevant"), "relevant should be true for value = 3");
doh.f(first1.get("required"), "required should be false for value = 3");
doh.f(first1.get("valid"), "valid should be false for value = 3");
first1.set("value", "5");
doh.f(first1.get("readOnly"), "readOnly should be false for value = 5");
doh.t(first1.get("relevant"), "relevant should be true for value = 5");
doh.f(first1.get("required"), "required should be false for value = 5");
doh.t(first1.get("valid"), "valid should be ture for value = 5");
}
}, {
name: "TestNumUpdate",
runTest: function(){
var num1 = registry.byId("numInput");
num1.set("value", 1);
doh.f(num1.get("readOnly"), "readOnly should be false for value = 1");
doh.f(num1.get("required"), "required should be false for value = 1");
doh.f(num1.get("valid"), "valid should be false for value = 1");
num1.set("value",5);
doh.f(num1.get("readOnly"), "readOnly should be false for value = 5");
doh.f(num1.get("required"), "required should be false for value = 5");
doh.t(num1.get("valid"), "valid should be true for value = 5");
}
}, {
name: "TestNumUpdate",
runTest: function(){
var last1 = registry.byId("lastnameInput");
var email1 = registry.byId("emailInput");
last1.set("value", "5");
doh.f(email1.get("readOnly"), "readOnly should be false for email value = 5");
doh.t(email1.get("relevant"), "relevant should be true for email value = 5");
doh.f(email1.get("required"), "required should be false for email value = 5");
doh.t(email1.get("valid"), "valid should be true for email value = 5");
last1.set("value", "0");
doh.f(email1.get("readOnly"), "readOnly should be false for email value = 0");
doh.f(email1.get("relevant"), "relevant should be false for email value = 0");
doh.f(email1.get("required"), "required should be false for email value = 0");
doh.t(email1.get("valid"), "valid should be true for email value = 0");
last1.set("value", "1");
doh.f(email1.get("readOnly"), "readOnly should be false for email value = 1");
doh.t(email1.get("relevant"), "relevant should be true for email value = 1");
doh.f(email1.get("required"), "required should be false for email value = 1");
doh.f(email1.get("valid"), "valid should be false for email value = 1");
last1.set("value", "2");
doh.t(email1.get("readOnly"), "readOnly should be true for email value = 2");
doh.t(email1.get("relevant"), "relevant should be true for email value = 2");
doh.f(email1.get("required"), "required should be false for email value = 2");
doh.t(email1.get("valid"), "valid should be true for email value = 2");
last1.set("value", "3");
doh.t(email1.get("readOnly"), "readOnly should be true for email value = 3");
doh.t(email1.get("relevant"), "relevant should be true for email value = 3");
doh.f(email1.get("required"), "required should be false for email value = 3");
doh.f(email1.get("valid"), "valid should be false for email value = 3");
last1.set("value", "4");
doh.f(email1.get("readOnly"), "readOnly should be false for email value = 4");
doh.t(email1.get("relevant"), "relevant should be true for email value = 4");
doh.t(email1.get("required"), "required should be true for email value = 4");
doh.t(email1.get("valid"), "valid should be true for email value = 4");
last1.set("value","5");
doh.f(email1.get("readOnly"), "readOnly should be false for email value = 5");
doh.t(email1.get("relevant"), "relevant should be true for email value = 5");
doh.f(email1.get("required"), "required should be false for email value = 5");
doh.t(email1.get("valid"), "valid should be true for email value = 5");
}
}]);
doh.run();
});
});
</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">
<h1>Binding Tests</h1>
</div>
</div>
<div id="main">
<div id="leftNav">
</div>
<div id="mainContent">
<h2>Bind Self Tests</h2>
<div class="row">
<label style="display:inline-block; width:100%; text-align:left;">First: Enter 0 to test for Relevant false (use Reset to re-enable)</label>
<label style="display:inline-block; width:100%; text-align:left;">First: Enter 1 to test for Valid false.</label>
<label style="display:inline-block; width:100%; text-align:left;">First: Enter 2 to test for ReadOnly false (use Reset to re-enable)</label>
<label style="display:inline-block; width:100%; text-align:left;">First: Enter 3 to test for ReadOnly false and Valid false (use Reset to re-enable)</label>
</div>
<div class="row">
<label class="cell" for="firstnameInput">First:</label>
<input class="cell" id="firstnameInput" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="value: at(model, 'First'),
readOnly: at(model, 'First').transform(readOnlyConverter),
relevant: at(model, 'First').transform(relevanceConverter),
valid: at(model, 'First').transform(numValidConverter)">
<!-- Content in output below will always be in sync with value of textbox above -->
First name is: <span id="tout" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'First')"></span>
</div>
<div class="row">
<label class="cell" for="firstnameInput"></label>
ReadOnly is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'First').transform(readOnlyConverter)"></span>
Relevant is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'First').transform(relevanceConverter)"></span>
Valid is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'First').transform(numValidConverter)"></span>
</div>
<div class="row">
<label style="display:inline-block; width:100%; text-align:left;">Num: Enter 1 for Valid false</label>
</div>
<div class="row">
<label class="cell" for="numInput">Num:</label>
<input class="cell" id="numInput" data-dojo-type="dijit.form.NumberTextBox"
data-dojo-props="value: at(model, 'Num'),
valid: at(model, 'Num').transform(numValidConverter)">
Num is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'Num')"></span>
</div>
<h2>Bind Tests</h2>
<div class="row">
<label style="display:inline-block; width:100%; text-align:left;">Last: Enter 0 to test for Relevant false for Email.</label>
<label style="display:inline-block; width:100%; text-align:left;">Last: Enter 1 to test for Valid false for Email.</label>
<label style="display:inline-block; width:100%; text-align:left;">Last: Enter 2 to test for ReadOnly true for Email.</label>
<label style="display:inline-block; width:100%; text-align:left;">Last: Enter 3 to test for ReadOnly true and Valid false for Email.</label>
<label style="display:inline-block; width:100%; text-align:left;">Last: Enter 4 to test for Required true for Email.</label>
</div>
<div class="row">
<label class="cell" for="lastnameInput">Last:</label>
<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at(model, 'Last')">
Last name is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'Last')"></span>
</div>
<div class="row">
<label class="cell" for="emailInput">Email:</label>
<input class="cell" id="emailInput" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="value: at(model, 'Email'),
readOnly: at(model, 'Last').transform(readOnlyConverter),
relevant: at(model, 'Last').transform(relevanceConverter),
required: at(model, 'Last').transform(requiredConverter),
valid: at(model, 'Last').transform(numValidConverter)">
Email is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'Email')"></span>
</div>
<div class="row">
<label class="cell" for="emailInput"></label>
ReadOnly is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'Last').transform(readOnlyConverter)"></span>
Relevant is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'Last').transform(relevanceConverter)"></span>
Required is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'Last').transform(requiredConverter)"></span>
Valid is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model, 'Last').transform(numValidConverter)"></span>
</div>
</div>
</div>
</div>
</body>
</html>