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

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

Added Dojo 1.9.3 release.
File size: 7.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: false, 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                var model1, model2, model3;
17 
18                require([
19                        'dojo/parser',
20                        "dojo/_base/lang",
21                        'dojo/ready',
22                        'dojo/when',
23                        "dojo/Stateful",
24                        "dojox/mvc/getStateful",
25                        "dojox/mvc/getPlainValue",
26                        "dojo/store/Memory",
27                        'dijit/registry',                       
28                        'dijit/form/TextBox',
29                        'dijit/form/Button',
30                        'dojox/mvc/Group',
31                        'dojox/mvc/Repeat',
32                        'dojox/mvc/Output'
33                        ], function(parser, lang, ready, when, Stateful, getStateful, getPlainValue, Memory, registry){
34                               
35                                model1Data =
36                                [{
37                                        "Query" : "Engineers1",
38                                        "Results" : [
39                                                {
40                                                        "First"   : "Anne1",
41                                                        "Last"    : "Ackerman1"
42                                                },
43                                                {
44                                                        "First"   : "Ben1",
45                                                        "Last"    : "Beckham1"
46                                                },
47                                                {
48                                                        "First"   : "Chad1",
49                                                        "Last"    : "Chapman1"
50                                                }
51                                        ]
52                                }];
53                                model2Data =
54                                [{
55                                        "Query" : "Engineers2",
56                                        "Results" : [
57                                                {
58                                                        "First"   : "Anne2",
59                                                        "Last"    : "Ackerman2"
60                                                },
61                                                {
62                                                        "First"   : "Ben2",
63                                                        "Last"    : "Beckham2"
64                                                }
65                                        ]
66                                }];
67                                model3Data =
68                                [{
69                                        "Query" : "Engineers3",
70                                        "Results" : [
71                                                {
72                                                        "First"   : "",
73                                                        "Last"    : ""
74                                                }
75                                        ]
76                                }];
77
78                                var memStore1 = new Memory({data : model1Data});
79                                when(memStore1.query(), function(data){
80                                        model1 = new Stateful({current: getStateful(data)[0]});
81                                });
82
83                                var memStore2 = new Memory({data : model2Data});
84                                //model2 = mvc.newStatefulModel({ store : memStore2 })[0];
85                                when(memStore2.query(), function(data){
86                                        model2 = new Stateful({current: getStateful(data)[0]});
87                                });
88                                var memStore3 = new Memory({data : model3Data});
89                                //model3 = mvc.newStatefulModel({ store : memStore3 })[0];
90                                when(memStore3.query(), function(data){
91                                        //model3 = getStateful(data)[0];
92                                        model3 = new Stateful({current: getStateful(data)[0]});
93                                });
94
95                                replaceData = function(dest, src){
96                                        src = getPlainValue(src);
97                                        dest.set("current", getStateful(src));
98                                };
99                               
100                                       
101                                // when "dojo/ready" is ready call parser.parse
102                                ready(function(){
103                                        parser.parse();
104                                });
105                        });
106
107                </script>
108        </head>
109        <body class="claro">
110                <script type="dojo/require">at: "dojox/mvc/at"</script>
111                <div id="wrapper">
112                        <div id="header">
113                                <div id="navigation"></div>
114                                <div id="headerInsert">
115                                        <h1>Input Ouput Sync</h1>
116                                        <h2>Data Binding Example</h2>
117                                </div>
118                        </div>
119                        <div id="main">
120                                <div id="leftNav"></div>
121                                <div id="mainContent">
122 
123<h4>This will swap which model is used for the textboxes, so updates will effect the output for that model</h4>
124                                        <div class="row">
125                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){dijit.byId('outergroupId').set('target',at(model1, 'current'));}">Swap Model1</button>
126                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){dijit.byId('outergroupId').set('target',at(model2, 'current'));}">Swap Model2</button>
127                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){dijit.byId('outergroupId').set('target',at(model3, 'current'));}">Swap Model3</button>
128                                        </div>
129
130                                        <h4>Replace Model 1 data with original data from the models listed below, this should keep the bindings to the Model1 Output</h4>
131                                        <div class="row" style="width: 740px">
132                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){replaceData(model1, model1Data[0]);}">Replace with Orig. Model1 data</button>
133                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){replaceData(model1, model2Data[0]);}">Replace with Orig. Model2 data</button>
134                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){replaceData(model1, model3Data[0]);}">Replace with Orig. Model3 data</button>
135                                        </div>
136                                        <h4>Replace Model 1 data with the current model data listed below, this should keep the bindings to the Model1 Output</h4>
137                                        <div class="row" style="width: 540px">                                         
138                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){replaceData(model1, model2.current);}">Replace with Model2 data</button>
139                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){replaceData(model1, model3.current);}">Replace with Model3 data</button>
140                                        </div>
141                                        <div id="outergroupId"   data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(model1, 'current')">
142                                                <div id="repeatId" data-dojo-type="dojox.mvc.Repeat"
143                                                                                        data-dojo-props="children: at('rel:', 'Results')">
144                                                        <div class="row" data-dojo-type="dojox.mvc.Group"
145                                                                                        data-dojo-props="target: at('rel:${this.index}')">
146                                                                <label class="cell" for="nameInput${this.index}">Name:</label>
147                                                                <input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}"
148                                                                        data-dojo-props="value: at('rel:', 'First')">
149                                                        </div>
150                                                </div>
151                                        </div>
152                                        <div class="row">
153                                                <span>Model1 Output is ==&gt;  </span>
154                                                <div id="outergroupId12"         data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(model1, 'current')">
155                                                        <div id="repeatId12" data-dojo-type="dojox.mvc.Repeat"
156                                                                                        data-dojo-props="children: at('rel:', 'Results')">
157                                                                <div data-dojo-type="dojox.mvc.Group"
158                                                                                        data-dojo-props="target: at('rel:${this.index}')">
159                                                                        <span>Model1 Name${this.index} is</span>
160                                                                        <span id="firstnameOutput12${this.index}" data-dojo-type="dojox.mvc.Output"
161                                                                                data-dojo-props="value: at('rel:', 'First')"></span>
162                                                                </div>
163                                                        </div>
164                                                </div>
165                                        </div>
166                                        <div class="row">
167                                                <span>Model2 Output is ==&gt;  </span>
168                                                <div id="outergroupId22"         data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(model2, 'current')">
169                                                        <div id="repeatId22" data-dojo-type="dojox.mvc.Repeat"
170                                                                                        data-dojo-props="children: at('rel:', 'Results')">
171                                                                <div data-dojo-type="dojox.mvc.Group"
172                                                                                        data-dojo-props="target: at('rel:${this.index}')">
173                                                                        <span>Model2 Name${this.index} is</span>
174                                                                        <span id="firstnameOutput22${this.index}" data-dojo-type="dojox.mvc.Output"
175                                                                                data-dojo-props="value: at('rel:', 'First')"></span>
176                                                                </div>
177                                                        </div>
178                                                </div>
179                                        </div>
180                                        <div class="row">
181                                                <span>Model3 Output is ==&gt;  </span>
182                                                <div id="outergroupId23"         data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(model3, 'current')">
183                                                        <div id="repeatId23" data-dojo-type="dojox.mvc.Repeat"
184                                                                                        data-dojo-props="children: at('rel:', 'Results')">
185                                                                <div data-dojo-type="dojox.mvc.Group"
186                                                                                        data-dojo-props="target: at('rel:${this.index}')">
187                                                                        <span>Model3 Name${this.index} is</span>
188                                                                        <span id="firstnameOutput23${this.index}" data-dojo-type="dojox.mvc.Output"
189                                                                                data-dojo-props="value: at('rel:', 'First')"></span>
190                                                                </div>
191                                                        </div>
192                                                </div>
193                                        </div>
194                                </div>
195                        </div>
196                </div>
197        </body>
198</html>
Note: See TracBrowser for help on using the repository browser.