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.
122 lines (104 loc) • 4.42 kB
HTML
<html >
<head>
<style type="text/css">
@import "../../../../dijit/themes/claro/claro.css";
</style>
<style type="text/css">
/* BEGIN .. css :: Things in this section have to be two tabs in */
.row { width: 500px; display: inline-block; margin: 5px; }
.cell { width: 20%; display:inline-block; }
/* END .. css :: Things in this section have to be two tabs in */
</style>
<script src="../../../../dojo/dojo.js" data-dojo-config='parseOnLoad: false, mvc: {debugBindings: true}'></script><script>var searchRecords;
/* BEGIN .. js :: Things in this section have to be two tabs in */
var templateString2 = '<div class="row">'
+ '<script type="dojo/require">at: "dojox/mvc/at"<\/script>'
+ '<label class="cell">Name:</label>'
+ '<input id="${parent.id}_textbox${indexAtStartup}" class="cell" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="firstNode"></input>'
+ '<input class="cell" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="lastNode"></input>'
+ '</div>';
require([
"dojo/_base/declare",
"dojo/when",
"dojo/dom",
"dojo/parser",
"dojo/promise/all",
"dojo/store/Memory",
"dojox/mvc/at",
"dijit/registry",
"dijit/_WidgetBase",
"dojox/mvc/EditStoreRefListController",
"dojox/mvc/WidgetList",
"dijit/form/TextBox",
"dojox/mvc/Group",
"dojo/domReady!"
], function(declare, when, ddom, parser, all, Memory, at, registry, _WidgetBase, EditStoreRefListController, WidgetList){
// Initial data
var data = {
"identifier": "Serial",
"items": [
{
"Serial" : "A111",
"First" : "Anne",
"Last" : "Ackerman",
"Email" : "a.a@test.com"
},
{
"Serial" : "B111",
"First" : "Ben",
"Last" : "Beckham",
"Email" : "b.b@test.com"
},
{
"Serial" : "I111",
"First" : "Irene",
"Last" : "Ira",
"Email" : "i.i@test.com"
},
{
"Serial" : "J111",
"First" : "John",
"Last" : "Jacklin",
"Email" : "j.j@test.com"
}
]
};
ctrl = new EditStoreRefListController({store: new Memory({data: data})});
// Programmatic WidgetList using childBindings and a templateString using attach-points
(new WidgetList({templateString: templateString2,
children: at(ctrl, "model"),
childBindings: {
firstNode: {value: at("rel:", "First")},
lastNode: {value: at("rel:", "Last")}
}},
ddom.byId("programmaticRepeat1"))).startup();
// Programatic WidgetList using childParams and startup function to setup bindings with templateString using attach-points
(new WidgetList({templateString: templateString2,
children: at(ctrl, "model"),
childParams: {
startup: function(){
this.firstNode.set("value", at("rel:", "First"));
this.lastNode.set("value", at("rel:", "Last"));
this.inherited("startup", arguments);
}}},
ddom.byId("programmaticRepeat2"))).startup();
when(all([parser.parse(), ctrl.queryStore()]), function(a){
console.log("parser.parse and queryStore are complete ctrl.model is set to from the query",a[1]);
});
});
/* END .. js :: */
</script>
</head>
<body class="claro">
<!-- BEGIN .. html :: THINGS IN HERE START TWO TABS IN -->
<div id="main">
<h4>Programatic WidgetList using childBindings to setup the bindings with a templateString using attach-points: </h4>
<div id="programmaticRepeat1"></div>
<h4>Programatic WidgetList using childParams and startup function to setup bindings with templateString using attach-points: </h4>
<div id="programmaticRepeat2"></div>
<p>In the above example, the TextBoxes inside the WidgetList are bound to the same model, so updates in one list will be reflected in the other.
</div>
<!-- END .. html :: THINGS IN HERE START TWO TABS IN -->
</body>
</html>