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.
220 lines (192 loc) • 7.27 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>13899 mvc Stateful Dates</title>
<style>
@import "../../../../dijit/themes/claro/document.css";
@import "../../../util/doh/robot/robot.css";
@import "../../../../dijit/tests/css/dijitTests.css";
.cell { display:inline-block; }
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug: true, parseOnLoad: false"></script>
<!-- only needed for alternate theme testing: -->
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
var model;
require([
'dojo/parser',
'dojox/mvc',
'dojo/store/Memory',
'dijit/form/DateTextBox',
'dijit/CalendarLite',
'dojox/mvc/StatefulModel',
'dojox/mvc/Repeat',
'dojox/mvc/Group',
'dojox/mvc/at',
'dijit/registry',
'dijit/form/Button',
'dojox/mvc/Output',
'dijit/form/TextBox',
'dojo/date/stamp',
'dojo/dom',
'dojo/dom-construct',
'dojo/on',
'dojo/domReady!'
], function (parser, mvc, Memory, DateTextBox, Calendar, StatefulModel, Repeat, Group,
at, registry, Button, Output, TextBox, dateStamp, dom, domconstruct) {
window.at = at;
// *** Test1 setup begin: ***
var search_results_init1 =
[{
"Query" : "Engineers1",
"Results" : [
{
"First" : "Anne1",
"Last" : "Ackerman1"
},
{
"First" : "Ben1",
"Last" : "Beckham1"
},
{
"First" : "Chad1",
"Last" : "Chapman1"
}
]
}];
var search_results_init2 =
[{
"Query" : "Engineers2",
"Results" : [
{
"First" : "Anne2",
"Last" : "Ackerman2"
},
{
"First" : "Ben2",
"Last" : "Beckham2"
}
]
}];
var search_results_init3 =
[{
"Query" : "Engineers3",
"Results" : [
{
"First" : "Chad3",
"Last" : "Chapman3"
}
]
}];
var memStore1 = new Memory({data : search_results_init1});
model1 = mvc.newStatefulModel({ store : memStore1 })[0];
var memStore2 = new Memory({data : search_results_init2});
model2 = mvc.newStatefulModel({ store : memStore2 })[0];
var memStore3 = new Memory({data : search_results_init3});
model3 = mvc.newStatefulModel({ store : memStore3 })[0];
templateString = '<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: \'${this.index}\'">' +
'<label class="cell">Name:</label>' +
'<input class="cell" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: \'First\'"></input>' +
'<div class="cell" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: \'Last\'"></div>' +
'</div>';
// I would like to be able to programmatically create the widgets
// which would go into the repeat, but that is not possible now given the way the
// repeat parses it's content when it is built
// need to parse the declarative swap buttons
parser.parse("swapbuttons2");
var swapb1 = new Button({
onClick: function(){swapToModel(model1);},
id: "swapbutton1",
label: "Swap Model1"
}, document.getElementById('swapbutton1'));
swapb1.startup();
var swapb2 = new Button({
onClick: function(){swapToModel(model2);},
id: "swapbutton2",
label: "Swap Model2"
}, document.getElementById('swapbutton2'));
swapb2.startup();
var swapb3 = new Button({
onClick: function(){swapToModel(model3);},
id: "swapbutton3",
label: "Swap Model3"
}, document.getElementById('swapbutton3'));
swapb3.startup();
var test2_repeat = new Repeat({
ref: model1.Results
}, document.getElementById('test2_repeat'));
test2_repeat.startup();
var test3_repeat = new Repeat({
children: at(model1, 'Results')
}, document.getElementById('test3_repeat'));
test3_repeat.startup();
var test1_repeat = new Repeat({
templateString: templateString, // not needed with my.Repeat since it is set there.
ref: model1.Results
}, document.getElementById('test1_repeat'));
test1_repeat.startup();
});
// called to reset the model for each of the repeats
//function swapToModel(model) {
// console.log("called with "+model);
//}
</script>
</head>
<body class="claro">
<h2>Test 1: A programmatic repeat using a Template with a textbox and an mvc output field.</h2>
<div style="border-style: solid; border-width: 2px; width: 827px;">
<div id="test1_repeat">
</div>
</div>
<h2>Test 2: A programmatic repeat with the html inline with an mvc output field and a textbox.</h2>
<div style="border-style: solid; border-width: 2px; width: 827px;">
<div id="test2_repeat">
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'">
<label class="cell">Name:</label>
<div class="cell" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: 'First'"></div>
<input class="cell" data-dojo-type="dijit.form.TextBox" data-dojo-props="ref: 'Last'"></input>
</div>
</div>
</div>
<h2>Test 3: A programmatic repeat with the html inline using mvc.at.</h2>
<div style="border-style: solid; border-width: 2px; width: 827px;">
<div id="test3_repeat">
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:${this.index}')">
<label class="cell">Name:</label>
<input class="cell" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:First', 'value')"></input>
<input class="cell" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at('rel:Last', 'value')"></input>
</div>
</div>
</div>
<h2>Test 4: Programmatic Swap models, this one is done by swapping between different models, I would like to be able to update the model data without replacing the model.</h2>
<div id="swapbuttons" class="row">
<div id="swapbutton1" ></div>
<div id="swapbutton2" ></div>
<div id="swapbutton3" ></div>
</div>
<h2>Test 5: Swap models, (these are declarative buttons) this one is done by swapping between different models, I would like to be able to update the model data without replacing the model.</h2>
<div id="swapbuttons2" class="row">
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){swapToModel(model1);}">Swap Model1</button>
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){swapToModel(model2);}">Swap Model2</button>
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){swapToModel(model3);}">Swap Model3</button>
</div>
<script type="text/javascript">
function swapToModel(model) {
require([
"dijit/registry",
"dojox/mvc/at"
], function(registry, at){
var widget = registry.byId("test1_repeat");
widget.set("ref", model.Results);
registry.byId("test2_repeat").set("ref", model.Results);
registry.byId("test3_repeat").set("children", at(model, 'Results'));
});
}
</script>
</body>
</html>