source: Dev/trunk/src/client/dojox/mvc/tests/docExamples/repeatDeclarativeExample1.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 4.3 KB
Line 
1<!DOCTYPE html>
2<html >
3<head>
4
5                <style type="text/css">
6                        @import "../../../../dijit/themes/claro/claro.css";
7                </style>
8        <style type="text/css">
9/* BEGIN .. css :: Things in this section have to be two tabs in */
10       
11        .row { width: 500px; display: inline-block; margin: 5px; }
12        .cell { width: 20%;  display:inline-block; }
13
14/* END .. css :: Things in this section have to be two tabs in */
15</style>
16<script src="../../../../dojo/dojo.js" data-dojo-config='parseOnLoad: true, mvc: {debugBindings: true}'></script>
17<script>
18/* BEGIN .. js :: Things in this section have to be two tabs in */
19
20                var searchRecords;
21                require([
22                        'dojo/parser',
23                        'dojo/ready',
24                        'dojox/mvc/getStateful',
25                        'dijit/form/TextBox',
26                        'dijit/form/Button',
27                        'dojox/mvc/Group',
28                        'dojox/mvc/Repeat',
29                        'dojox/mvc/Output'
30                        ], function(parser, ready, getStateful){
31
32                        // Initial data
33                        var search_results_init = {
34                        "identifier": "Serial",
35                        "items": [
36                    {
37                        "Serial"  : "A111",
38                        "First"   : "Anne",
39                        "Last"    : "Ackerman",
40                        "Email"   : "a.a@test.com"
41                    },
42                    {
43                        "Serial"  : "B111",
44                        "First"   : "Ben",
45                        "Last"    : "Beckham",
46                        "Email"   : "b.b@test.com"
47                    },
48                    {
49                        "Serial"  : "I111",
50                        "First"   : "Irene",
51                        "Last"    : "Ira",
52                        "Email"   : "i.i@test.com"
53                    },
54                    {
55                        "Serial"  : "J111",
56                        "First"   : "John",
57                        "Last"    : "Jacklin",
58                        "Email"   : "j.j@test.com"
59                    }
60                ]
61                        };
62                                // The getStateful call will take json data and create make it Stateful
63                                searchRecords = getStateful(search_results_init);
64                        });
65
66/* END .. js :: */
67</script>
68</head>
69<body class="claro">
70<!--  BEGIN .. html :: THINGS IN HERE START TWO TABS IN -->     
71
72                <script type="dojo/require">at: "dojox/mvc/at"</script>
73                <div id="main">
74                <div data-dojo-type="dojox/mvc/Group" data-dojo-props="target: searchRecords">
75        <!--
76            The repeat container denotes a templated UI that operates over a collection
77            of data records.
78            The UI can be customized for each iteration using properties such as
79            ${this.index} for the iteration index.
80        -->
81                <h4>Repeat with TextBox for First and Last properties: </h4>       
82                <div id="repeatId" data-dojo-type="dojox/mvc/Repeat" data-dojo-props="children: at('rel:', 'items')">
83            <div class="row" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at('rel:', ${this.index})">
84                <label class="cell" for="nameInput${this.index}">Name:</label>
85                <input class="cell" data-dojo-type="dijit/form/TextBox" id="nameInput${this.index}"
86                                    data-dojo-props="value: at('rel:', 'First')"></input>
87                <input class="cell" data-dojo-type="dijit/form/TextBox"
88                                    data-dojo-props="value: at('rel:', 'Last')"></input>
89            </div>
90        </div>
91        <h4>Repeat with mvc/Output for First and Last properties, will be updated when the TextBox is updated: </h4>       
92        <div id="repeatIdOutput" data-dojo-type="dojox/mvc/Repeat" data-dojo-props="children: at('rel:', 'items')">
93            <div class="row" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at('rel:', ${this.index})">
94                <label class="cell" for="nameOutput${this.index}">Name:</label>
95                <div class="cell" data-dojo-type="dojox/mvc/Output" id="nameOutput${this.index}"
96                                    data-dojo-props="value: at('rel:', 'First')"></div>
97                <div class="cell" data-dojo-type="dojox/mvc/Output"
98                                    data-dojo-props="value: at('rel:', 'Last')"></div>
99            </div>
100        </div>
101                </div>
102        <p>In the above example, the TextBoxes inside the repeat will display the firstname of each of the entries in the model.
103                </div>
104
105<!--  END .. html :: THINGS IN HERE START TWO TABS IN -->       
106</body>
107</html>
Note: See TracBrowser for help on using the repository browser.