You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
4.3 KiB
107 lines
4.3 KiB
<!DOCTYPE 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: true, mvc: {debugBindings: true}'></script> |
|
<script> |
|
/* BEGIN .. js :: Things in this section have to be two tabs in */ |
|
|
|
var searchRecords; |
|
require([ |
|
'dojo/parser', |
|
'dojo/ready', |
|
'dojox/mvc/getStateful', |
|
'dijit/form/TextBox', |
|
'dijit/form/Button', |
|
'dojox/mvc/Group', |
|
'dojox/mvc/Repeat', |
|
'dojox/mvc/Output' |
|
], function(parser, ready, getStateful){ |
|
|
|
// Initial data |
|
var search_results_init = { |
|
"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" |
|
} |
|
] |
|
}; |
|
// The getStateful call will take json data and create make it Stateful |
|
searchRecords = getStateful(search_results_init); |
|
}); |
|
|
|
/* END .. js :: */ |
|
</script> |
|
</head> |
|
<body class="claro"> |
|
<!-- BEGIN .. html :: THINGS IN HERE START TWO TABS IN --> |
|
|
|
<script type="dojo/require">at: "dojox/mvc/at"</script> |
|
<div id="main"> |
|
<div data-dojo-type="dojox/mvc/Group" data-dojo-props="target: searchRecords"> |
|
<!-- |
|
The repeat container denotes a templated UI that operates over a collection |
|
of data records. |
|
The UI can be customized for each iteration using properties such as |
|
${this.index} for the iteration index. |
|
--> |
|
<h4>Repeat with TextBox for First and Last properties: </h4> |
|
<div id="repeatId" data-dojo-type="dojox/mvc/Repeat" data-dojo-props="children: at('rel:', 'items')"> |
|
<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')"></input> |
|
<input class="cell" data-dojo-type="dijit/form/TextBox" |
|
data-dojo-props="value: at('rel:', 'Last')"></input> |
|
</div> |
|
</div> |
|
<h4>Repeat with mvc/Output for First and Last properties, will be updated when the TextBox is updated: </h4> |
|
<div id="repeatIdOutput" data-dojo-type="dojox/mvc/Repeat" data-dojo-props="children: at('rel:', 'items')"> |
|
<div class="row" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at('rel:', ${this.index})"> |
|
<label class="cell" for="nameOutput${this.index}">Name:</label> |
|
<div class="cell" data-dojo-type="dojox/mvc/Output" id="nameOutput${this.index}" |
|
data-dojo-props="value: at('rel:', 'First')"></div> |
|
<div class="cell" data-dojo-type="dojox/mvc/Output" |
|
data-dojo-props="value: at('rel:', 'Last')"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<p>In the above example, the TextBoxes inside the repeat will display the firstname of each of the entries in the model. |
|
</div> |
|
|
|
<!-- END .. html :: THINGS IN HERE START TWO TABS IN --> |
|
</body> |
|
</html>
|
|
|