source: Dev/trunk/src/client/dojox/mvc/tests/test_mvc_new-ref-set-repeat-simple.html

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

Added Dojo 1.9.3 release.
File size: 5.4 KB
Line 
1<!DOCTYPE html>
2<html>
3        <head>
4                <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5                <title>Static Master/Detail Pattern -- Multiple Address Detail example</title>
6
7                <script src="../../../dojo/dojo.js"
8                                type="text/javascript"
9                                data-dojo-config="parseOnLoad: true, isDebug: true, mvc: {debugBindings: true}">
10                </script>
11                <style type="text/css">
12                        @import "css/app-format.css";
13                        @import "../../../dijit/themes/claro/claro.css";
14                </style>
15                <script type="text/javascript" >
16                        dojo.require("dojox.mvc");
17                        dojo.require("dojox.mvc.Output");
18                        dojo.require("dojox.mvc.Group");
19                        dojo.require("dojox.mvc.Repeat");
20                        dojo.require("dijit.form.TextBox");
21                        dojo.require("dijit.form.Button");
22                        dojo.require("dojo.store.Memory");
23                        dojo.require("dojo.parser");
24
25                       
26                        var model1Data =
27                        [{
28                                "Query" : "Engineers1",
29                                "Results" : [
30                                        {
31                                                "First"   : "Anne1",
32                                                "Last"    : "Ackerman1"
33                                        },
34                                        {
35                                                "First"   : "Ben1",
36                                                "Last"    : "Beckham1"
37                                        },
38                                        {
39                                                "First"   : "Chad1",
40                                                "Last"    : "Chapman1"
41                                        }
42                                ]
43                        }];
44                        var model2Data =
45                        [{
46                                "Query" : "Engineers2",
47                                "Results" : [
48                                        {
49                                                "First"   : "Anne2",
50                                                "Last"    : "Ackerman2"
51                                        },
52                                        {
53                                                "First"   : "Ben2",
54                                                "Last"    : "Beckham2"
55                                        }
56                                ]
57                        }];
58                        var model3Data =
59                        [{
60                                "Query" : "Engineers3",
61                                "Results" : [
62                                        {
63                                                "First"   : "",
64                                                "Last"    : ""
65                                        }
66                                ]
67                        }];
68
69                        var memStore1 = new dojo.store.Memory({data : model1Data});
70                        var model1 = dojox.mvc.newStatefulModel({ store : memStore1 })[0];
71                        var memStore2 = new dojo.store.Memory({data : model2Data});
72                        var model2 = dojox.mvc.newStatefulModel({ store : memStore2 })[0];
73                        var memStore3 = new dojo.store.Memory({data : model3Data});
74                        var model3 = dojox.mvc.newStatefulModel({ store : memStore3 })[0];
75                </script>
76        </head>
77        <body class="claro">
78                <script type="dojo/require">at: "dojox/mvc/at"</script>
79                <div id="wrapper">
80                        <div id="header">
81                                <div id="navigation"></div>
82                                <div id="headerInsert">
83                                        <h1>Input Ouput Sync</h1>
84                                        <h2>Data Binding Example</h2>
85                                </div>
86                        </div>
87                        <div id="main">
88                                <div id="leftNav"></div>
89                                <div id="mainContent">
90                                        <div class="row">
91                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){dijit.byId('outergroupId').set('ref',model1);}">Swap Model1</button>
92                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){dijit.byId('outergroupId').set('ref',model2);}">Swap Model2</button>
93                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){dijit.byId('outergroupId').set('ref',model3);}">Swap Model3</button>
94                                        </div>
95                                        <div class="row">
96                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){dijit.byId('outergroupId').set('target',model1Data);}">Swap Model1 data</button>
97                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){console.log(model2Data);dijit.byId('outergroupId').set('target', model2Data);}">Swap Model2 data</button>
98                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){dijit.byId('outergroupId').set('target',model3Data);}">Swap Model3 data</button>                                         
99                                        </div>
100                                        <div id="outergroupId"   data-dojo-type="dojox.mvc.Group" data-dojo-props="target: model1">
101                                                <div id="repeatId" data-dojo-type="dojox.mvc.Repeat"
102                                                                                        data-dojo-props="children: at('rel:', 'Results')">
103                                                        <div class="row" data-dojo-type="dojox.mvc.Group"
104                                                                                        data-dojo-props="target: at('rel:${this.index}')">
105                                                                <label class="cell" for="nameInput${this.index}">Name:</label>
106                                                                <input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}"
107                                                                        data-dojo-props="value: at('rel:First', 'value')">
108                                                        </div>
109                                                </div>
110                                        </div>
111                                        <div class="row">
112                                                        <span>
113                                                                Model1 Output is ==> 
114                                                        </span>
115                                                        <span id="firstnameOutput10" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model1.Results[0].First">
116                                                                Name1 is "${this.value}" :
117                                                        </span>
118                                                        <span id="firstnameOutput11" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model1.Results[1].First">
119                                                                Name2 is "${this.value}" :
120                                                        </span>
121                                                        <span id="firstnameOutput12" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model1.Results[2].First">
122                                                                Name3 is "${this.value}" 
123                                                        </span>
124                                        </div>
125                                        <div class="row">
126                                                        <span>
127                                                                Model2 Output is ==> 
128                                                        </span>
129                                                        <span id="firstnameOutput20" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model2.Results[0].First">
130                                                                Name1 is "${this.value}" :
131                                                        </span>
132                                                        <span id="firstnameOutput21" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model2.Results[1].First">
133                                                                Name2 is "${this.value}" 
134                                                        </span>
135                                        </div>
136                                        <div class="row">
137                                                        <span>
138                                                                Model3 Output is ==> 
139                                                        </span>
140                                                        <span id="firstnameOutput30" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model3.Results[0].First">
141                                                                Name1 is "${this.value}" 
142                                                        </span>
143                                        </div>                                 
144                                        <br/>Model:
145                                        <button id="reset" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){model1.reset();model2.reset();model3.reset();}">Reset all</button>
146                                </div>
147                        </div>
148                </div>
149        </body>
150</html>
Note: See TracBrowser for help on using the repository browser.