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.
230 lines (222 loc) • 8.42 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>
<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>
<script src="../../../../dojo/dojo.js" type="text/javascript" data-dojo-config="isDebug: true, mvc: {debugBindings: true}"></script>
<script type="text/javascript" src="./helpers.js"></script>
<script type="text/javascript">
var ctrl, data1, data2, data3;
require([
"doh/runner",
"dojo/_base/array",
"dojo/_base/lang",
"dojo/when",
"dojo/parser",
"dojo/store/Memory",
"dijit/registry",
"dojox/mvc/getStateful",
"dojox/mvc/ModelRefController",
"dijit/form/TextBox",
"dijit/form/Button",
"dojox/mvc/Group",
"dojox/mvc/Output",
"dojox/mvc/Repeat",
"dojo/domReady!"
], function(doh, array, lang, when, parser, MemoryStore, registry, getStateful, ModelRefController){
function runTests(){
doh.register("Tests", [
{
name : "initial",
runTest : function() {
ctrl.set("model", ctrl.get("model1"));
doh.is("Anne1", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne1");
doh.is("Ben1", registry.byId("nameInput1").get("value"), "nameInput1 should be Ben1 ");
doh.is("Chad1", registry.byId("nameInput2").get("value"), "nameInput2 should be Chad1");
doh.is("Anne1", registry.byId("firstnameOutput10").get("value"), "firstnameOutput10 should be Anne1");
doh.is("Ben1", registry.byId("firstnameOutput11").get("value"), "firstnameOutput11 should be Ben1 ");
doh.is("Chad1", registry.byId("firstnameOutput12").get("value"), "firstnameOutput12 should be Chad1");
doh.is("Anne2", registry.byId("firstnameOutput20").get("value"), "firstnameOutput20 should be Anne2");
doh.is("Ben2", registry.byId("firstnameOutput21").get("value"), "firstnameOutput21 should be Ben2 ");
doh.is("", registry.byId("firstnameOutput30").get("value"), "firstnameOutput30 should be blank");
}
}, {
name : "SelectModel2",
runTest : function() {
ctrl.set("model", ctrl.get("model2"));
doh.is("Anne2", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne2");
doh.is("Ben2", registry.byId("nameInput1").get("value"), "nameInput1 should be Ben2 ");
}
}, {
name : "ChangeModel2",
runTest : function() {
registry.byId("nameInput0").set("value", "Anne2-Update");
doh.is("Anne2-Update", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne2-Update");
doh.is("Ben2", registry.byId("nameInput1").get("value"), "nameInput1 should be Ben2 ");
doh.is("Anne2-Update", registry.byId("firstnameOutput20").get("value"), "firstnameOutput20 should be Anne2-Update");
doh.is("Ben2", registry.byId("firstnameOutput21").get("value"), "firstnameOutput21 should be Ben2 ");
}
}, {
name : "SelectModel3",
runTest : function() {
ctrl.set("model", ctrl.get("model3"));
doh.is("", registry.byId("nameInput0").get("value"), "nameInput0 should be blank");
}
}, {
name : "ChangeModel3",
runTest : function() {
registry.byId("nameInput0").set("value", "Anne3-Update");
doh.is("Anne3-Update", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne3-Update");
doh.is("Anne3-Update", registry.byId("firstnameOutput30").get("value"), "firstnameOutput30 should be Anne3-Update");
}
}, {
name : "UpdateData1",
runTest : function() {
var newdata = {
"Results": [
{
"First": "Anne1x",
"Last": "Ackerman1x"
},
{
"First": "Ben1x",
"Last": "Beckham1x"
}
]
};
ctrl.set("model", newdata);
doh.is("Anne1x", registry.byId("nameInput0").get("value"), "nameInput0 should be Anne1X");
}
}
]);
doh.run();
}
ctrl = new ModelRefController({ownProps: {model1: 1, model2: 1, model3: 1}});
when(parser.parse(), function(){
when((new MemoryStore({data: data1 = [
{
"Query": "Engineers1",
"Results": [
{
"First": "Anne1",
"Last": "Ackerman1"
},
{
"First": "Ben1",
"Last": "Beckham1"
},
{
"First": "Chad1",
"Last": "Chapman1"
}
]
}
]})).query(), function(data){
ctrl.set("model1", getStateful(data)[0]);
if(ctrl.get("model1") && ctrl.get("model2") && ctrl.get("model3")){ runTests(); }
});
when((new MemoryStore({data: data2 = [
{
"Query": "Engineers2",
"Results": [
{
"First": "Anne2",
"Last": "Ackerman2"
},
{
"First": "Ben2",
"Last": "Beckham2"
}
]
}
]}).query()), function(data){
ctrl.set("model2", getStateful(data)[0]);
if(ctrl.get("model1") && ctrl.get("model2") && ctrl.get("model3")){ runTests(); }
});
when((new MemoryStore({data: data3 = [
{
"Query": "Engineers3",
"Results": [
{
"First": "",
"Last": ""
}
]
}
]}).query()), function(data){
ctrl.set("model3", getStateful(data)[0]);
if(ctrl.get("model1") && ctrl.get("model2") && ctrl.get("model3")){ runTests(); }
});
});
});
</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>Input Output Sync</h1>
<h2>Data Binding Example</h2>
</div>
</div>
<div id="main">
<div id="leftNav"></div>
<div id="mainContent">
<div id="repeatId" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="children: at(ctrl, 'Results')">
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:${this.index}')">
<label class="cell" for="nameInput${this.index}">Name:</label>
<input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" data-dojo-props="value: at('rel:', 'First')"/>
</div>
</div>
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model1')">
<div data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:', 'Results')">
<span>
Model1 Output is ==>
</span>
<span id="firstnameOutput10" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:0', 'First')">
Name1 is "${this.value}" :
</span>
<span id="firstnameOutput11" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:1', 'First')">
Name2 is "${this.value}" :
</span>
<span id="firstnameOutput12" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:2', 'First')">
Name3 is "${this.value}"
</span>
</div>
</div>
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model2')">
<div data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:', 'Results')">
<span>
Model2 Output is ==>
</span>
<span id="firstnameOutput20" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:0', 'First')">
Name1 is "${this.value}" :
</span>
<span id="firstnameOutput21" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:1', 'First')">
Name2 is "${this.value}"
</span>
</div>
</div>
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model3')">
<div data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:', 'Results')">
<span>
Model3 Output is ==>
</span>
<span id="firstnameOutput30" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:0', 'First')">
Name1 is "${this.value}"
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>