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 (163 loc) • 5.3 kB
HTML
<html style="width:100%;height:100%;overflow:hidden;">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>MVC repeated widget test</title>
<style type="text/css">
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/claro/document.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<!-- required: a default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript">
dojoConfig = {
isDebug: 1,
parseOnLoad: 0,
async: 1,
mvc: {debugBindings: 1}
};
</script>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
require([
"dojo/dom",
"dojo/dom-class",
"dojo/parser",
"dijit/_WidgetBase",
"dojox/mvc/at",
"dojox/mvc/getStateful",
"dojox/mvc/Templated",
"dojox/mvc/WidgetList",
"dojo/text!dojox/mvc/tests/test_WidgetList_childTemplate.html",
"dojo/text!dojox/mvc/tests/test_WidgetList_childBindings.json",
"dijit/form/TextBox" // dijit._WidgetsInTemplateMixin does not support auto-loading modules by parser
], function(dom, domClass, parser, _WidgetBase, at, getStateful, Templated, WidgetList, childTemplate, childBindings){
array = getStateful([
{
Serial: "A111",
First: "Anne",
Last: "Ackerman",
Location: "NY",
Office: "1S76",
Email: "a.a@test.com",
Tel: "123-764-8237",
Fax: "123-764-8228"
},
{
Serial: "B111",
First: "Ben",
Last: "Beckham",
Location: "NY",
Office: "5N47",
Email: "b.b@test.com",
Tel: "123-764-8599",
Fax: "123-764-8600"
},
{
Serial: "C111",
First: "Chad",
Last: "Chapman",
Location: "CA",
Office: "1278",
Email: "c.c@test.com",
Tel: "408-764-8237",
Fax: "408-764-8228"
}
]);
arrayAlt = getStateful([
{
Serial: "D111",
First: "David",
Last: "Durham",
Location: "NJ",
Office: "C12",
Email: "d.d@test.com",
Tel: "514-764-8237",
Fax: "514-764-8228"
},
{
Serial: "E111",
First: "Emma",
Last: "Eklof",
Location: "NY",
Office: "4N76",
Email: "e.e@test.com",
Tel: "123-764-1234",
Fax: "123-764-4321"
}
]);
domClass.add(dom.byId("loading"), "dijitDisplayNone");
domClass.remove(dom.byId("main"), "dijitDisplayNone");
parser.parse();
(new WidgetList({
children: array,
childParams: {
startup: function(){
this.labelNode.set("value", at("rel:", "Serial"));
this.inputNode.set("value", at("rel:", "First"));
this.inherited("startup", arguments);
}
},
templateString: childTemplate
}, dom.byId("programmaticRepeat"))).startup();
(new WidgetList({
children: array,
templateString: childTemplate,
childBindings: eval("(" + childBindings + ")")
}, dom.byId("programmaticRepeatWithSeparateBindingDeclaration"))).startup();
});
</script>
</head>
<body class="claro" style="width:100%;height:100%;margin:0;padding:8px;overflow:hidden;">
<script type="dojo/require">at: "dojox/mvc/at", Stateful: "dojo/Stateful"</script>
<table id="loading" style="width:100%;height:100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">Loading...</td>
</tr>
</tbody>
</table>
<div id="main" class="dijitDisplayNone" style="width:100%;height:100%;">
<div>
<h1>Repeating simple text box and label</h1>
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo-props="children: array"
data-mvc-child-type="dijit/form/TextBox"
data-mvc-child-props="value: at(this.target, 'First')"></div>
<span data-dojo-type="dojox/mvc/WidgetList"
data-dojo-props="children: array"
data-mvc-child-type="dijit/_WidgetBase"
data-mvc-child-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at(this.target, 'First')"></span>
</div>
<div>
<h1>Repeating in-line template</h1>
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: array, partialRebuild: true">
<script type="dojox/mvc/InlineTemplate">
<div>
<span data-dojo-type="dijit/_WidgetBase"
data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at('rel:', 'Serial')"></span>:
<span data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:', 'First')"></span>
</div>
</script>
</div>
</div>
<div>
<h1>Repeating programmatically created template widget</h1>
<div id="programmaticRepeat"></div>
</div>
<div>
<h1>Repeating programmatically created template widget, with separate data binding declaration from template</h1>
<div id="programmaticRepeatWithSeparateBindingDeclaration"></div>
</div>
<div>
<h1>Modifying array elements</h1>
<input type="button" value="Replace" onclick="array.splice.apply(array, [1, 1].concat(arrayAlt)); this.disabled = true;">
</div>
</div>
</body>
</html>