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.
172 lines (156 loc) • 5.66 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>MVC Repeat with Selectable RoundRectList - Single Select</title>
<script type="text/javascript" src="../../../../dojox/mobile/deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug: true, async: true, parseOnLoad: false, mvc: {debugBindings: true}"></script>
<script type="text/javascript">
require([
"dojo/_base/lang",
"dijit/registry",
//"dojox/mobile/parser",
"dojo/parser",
"dojo/store/Memory",
"dojo/ready",
"dojo/when",
"dojox/mvc/getStateful",
"dojox/mvc/Group",
"dojox/mvc/Repeat",
"dojox/mvc/Templated",
"dojox/mvc/WidgetList",
"dojox/mvc/Output",
"dojox/mobile",
"dojox/mobile/Button",
"dojox/mobile/TextBox",
"dojox/mobile/CheckBox",
"dojox/mobile/deviceTheme"
], function(lang, registry, parser, MemoryStore, ready, when, getStateful){
var search_results_init1 =
[{
"Query" : "Engineers1",
"Results" : [
{
"First" : "Anne1",
"Last" : "Ackerman1",
"Checked" : true
},
{
"First" : "Ben1",
"Last" : "Beckham1",
"Checked" : false
},
{
"First" : "Chad1",
"Last" : "Chapman1",
"Checked" : false
}
]
}];
var search_results_init2 =
[{
"Query" : "Engineers1",
"Results" : [
{
"First" : "Anne2",
"Last" : "Ackerman2",
"Checked" : false
},
{
"First" : "Ben2",
"Last" : "Beckham2",
"Checked" : true
},
{
"First" : "Chad2",
"Last" : "Chapman2",
"Checked" : false
}
]
}];
var memStore1 = new MemoryStore({data : search_results_init1});
//model1 = mvc.newStatefulModel({ store : memStore1 })[0];
when(memStore1.query(), function(data){
model1 = getStateful(data)[0];
model1Orig = lang.clone(model1);
//if(model1 && model2 && model3){ runTests(); }
});
var memStore2 = new MemoryStore({data : search_results_init2});
//model2 = mvc.newStatefulModel({ store : memStore2 })[0];
when(memStore2.query(), function(data){
model2 = getStateful(data)[0];
model2Orig = lang.clone(model2);
//if(model1 && model2 && model3){ runTests(); }
});
// when "dojo/ready" is ready call parser.parse (if not doing parseOnLoad)
ready(function(){
parser.parse();
});
// called to reset the model for each of the repeats
swapToModel1 = function() {
registry.byId('repeatId1').set('children',model1.Results);
registry.byId('repeatId2').set('children',model1.Results);
};
swapToModel2 = function() {
registry.byId('repeatId1').set('children',model2.Results);
registry.byId('repeatId2').set('children',model2.Results);
};
resetAll = function() {
model1 = lang.clone(model1Orig);
model2 = lang.clone(model2Orig);
registry.byId('repeatId1').set('children',model1.Results);
registry.byId('repeatId2').set('children',model1.Results);
};
});
</script>
</head>
<body style="visibility:hidden;">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div id="wrapper">
<div id="header">
<div id="navigation"></div>
<div id="headerInsert">
<h2>MVC Repeat with Selectable RoundRectDataList - Single Select</h2>
</div>
</div>
<div id="main">
<div id="leftNav"></div>
<div id="mainContent">
<h4>Here is one using dojox.mvc.Repeat as a mixin with no Group and dojo.parser instead of dojox.mobile.parser it is all good using mixin.</h4>
<ul data-dojo-type="dojox.mobile.RoundRectList" id="repeatId1" select="single"
data-dojo-mixins="dojox/mvc/WidgetList"
data-mvc-child-type="dojox/mobile/ListItem"
data-mvc-child-props="label: at(this.target, 'First'), checked: at(this.target, 'Checked'), variableHeight: true"
data-dojo-props="children: model1.Results">
</ul>
<h4>You can update the label or checked from here to update the model.</h4>
<div id="repeatId2" data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: model1.Results">
<script type="dojox/mvc/InlineTemplate">
<div>
<input class="cell"
data-dojo-type="dojox/mobile/TextBox"
data-dojo-props="value: at('rel:', 'First')">
<label for="CBInput${indexAtStartup}"
data-dojo-type="dijit/_WidgetBase"
data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at('rel:', 'First')"></label>
<input class="cell" type="checkbox" id="CBInput${indexAtStartup}"
data-dojo-type="dojox/mobile/CheckBox"
data-dojo-props="checked: at('rel:', 'Checked')">
</div>
</script>
</div>
<br/>Model:
<button type="button" data-dojo-type="dojox.mobile.Button" data-dojo-props="onClick: function(){swapToModel2();}">Swap Model2</button>
<button type="button" data-dojo-type="dojox.mobile.Button" data-dojo-props="onClick: function(){swapToModel1();}">Swap Model1</button>
<button id="reset" type="button" data-dojo-type="dojox.mobile.Button" data-dojo-props="onClick: function(){resetAll();}">Reset all</button>
</div>
</div>
</div>
</body>
</html>