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.
219 lines (203 loc) • 7.44 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",
"dojox/mvc/sync",
"dijit/form/TextBox",
"dijit/form/NumberTextBox",
"dijit/form/ValidationTextBox",
"dijit/form/Button",
"dojox/mvc/Output"
], function(doh, parser, when, Stateful, registry, sync){
model = new Stateful({
First: "John",
Last: "Doe",
Email: "jdoe@example.com",
Num: 3
});
model2 = new Stateful({
First: "John2",
Last: "Doe2",
Email: "jdoe2@example.com",
Num: 2
});
model3 = new Stateful({
First: "",
Last: "",
Email: "",
Num: 3
});
model4 = new Stateful({
First: "John4",
Last: "Doe4",
Email: "jdoe4@example.com",
Num: 4
});
model5 = new Stateful({
First: "",
Last: "",
Email: "",
Num: 5
});
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
};
emailConverter = {
format: function(value){
return value + "formatted";
},
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 sync values from 2 to 3", [{
name: "Initial",
runTest: function(){
// sync test
var firstx2 = "";
sync(model2, "First", model3, "First");
doh.is("John2", model3.get("First"), "model3.First should be John2");
// set model3.First should update model2.First
model3.set("First", "Billy3");
doh.is("Billy3", model2.get("First"), "model2.First should now be Billy3");
sync(model2, "Last", model3, "Last", {bindDirection:sync.from});
// sync(model2, "Last", model3, "Last", {bindDirection:sync.to});
doh.is("Doe2", model3.get("Last"), "model3.Last should be Doe2");
// set model3.Last should NOT update model2.Last
model3.set("Last", "Billy3");
doh.is("Doe2", model2.get("Last"), "model2.Last should still be Doe2");
sync(model2, "Num", model3, "Num", {bindDirection:sync.to});
doh.is(3, model2.get("Num"), "model2.Num should be 3");
doh.is(3, model3.get("Num"), "model3.Num should be 3");
}
}, {
name: "TestSyncWildCard",
runTest: function(){
sync(model4, "*", model5, "*");
doh.is("John4", model5.get("First"), "model5.First should be John4");
doh.is("Doe4", model5.get("Last"), "model5.Last should now be Doe4");
// set model5.Last should update model4.Last
model5.set("Last", "Upate5");
doh.is("Upate5", model4.get("Last"), "model4.Last should be Upate5");
}
}, {
name: "TestSyncConverter",
runTest: function(){
sync(model2, "Email", model3, "Email", {converter : emailConverter});
doh.is("jdoe2@example.comformatted", model3.get("Email"), "model3.Email should be jdoe2@example.comformatted");
model2.set("Email", "Em2");
doh.is("Em2formatted", model3.get("Email"), "model3.Email should be Em2formatted");
// doh.is("Doe4", model5.get("Last"), "model5.Last should now be Doe4");
}
}]);
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 class="cell" for="firstnameInput">Model2 First:</label>
<input class="cell" id="firstnameInput" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="value: at(model2, 'First')">
<!-- 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(model2, 'First')"></span>
</div>
<div class="row">
<label class="cell" for="firstnameInput3">Model3 First:</label>
<input class="cell" id="firstnameInput3" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="value: at(model3, 'First')">
<!-- Content in output below will always be in sync with value of textbox above -->
First name is: <span id="tout3" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model3, 'First')"></span>
</div>
<div class="row">
<label class="cell" for="lastnameInput">Model2 Last:</label>
<input class="cell" id="lastnameInput" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="value: at(model2, 'Last')">
<!-- Content in output below will always be in sync with value of textbox above -->
Last name is: <span id="lasttout" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model2, 'Last')"></span>
</div>
<div class="row">
<label class="cell" for="lastnameInput3">Model3 Last:</label>
<input class="cell" id="lastnameInput3" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="value: at(model3, 'Last')">
<!-- Content in output below will always be in sync with value of textbox above -->
Last name is: <span id="lasttout3" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model3, 'Last')"></span>
</div>
<div class="row">
<label class="cell" for="emailInput2">Email:</label>
<input class="cell" id="emailInput2" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="value: at(model2, 'Email')">
Model2 Email is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model2, 'Email')"></span>
</div>
<div class="row">
<label class="cell" for="emailInput3">Email:</label>
<input class="cell" id="emailInput3" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="value: at(model3, 'Email')">
Model3 Email is: <span data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at(model3, 'Email')"></span>
</div>
</div>
</div>
</div>
</body>
</html>