source: Dev/trunk/src/client/dojox/mvc/tests/test_mvc_new-data-replace-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.5 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, model1Data, model2Data, model3Data;
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                        "dojox/mvc/EditModelRefController",
27                        "dojo/store/Memory",
28                        'dijit/registry',                       
29                        'dijit/form/TextBox',
30                        'dijit/form/Button',
31                        'dojox/mvc/Group',
32                        'dojox/mvc/Repeat',
33                        'dojox/mvc/Output'
34                        ], function(parser, lang, ready, when, Stateful, getStateful, getPlainValue, EditModelRefController, Memory, registry){
35                       
36                        model1Data =
37                        [{
38                                "Query" : "Engineers1",
39                                "First"   : "Anne1",
40                                "Last"    : "Ackerman1"
41                        }];
42
43                        model2Data =
44                        [{
45                                "Query" : "Engineers2",
46                                "First"   : "Anne2",
47                                "Last"    : "Ackerman2"
48                        }];
49                        model3Data =
50                        [{
51                                "Query" : "Engineers3",
52                                "First"   : "",
53                                "Last"    : ""
54                        }];
55
56                        //var memStore1 = new dojo.store.Memory({data : model1Data});
57                        //var model1 = dojox.mvc.newStatefulModel({ store : memStore1 })[0];
58                                var memStore1 = new Memory({data : model1Data});
59                                when(memStore1.query(), function(data){
60                                        model1 = EditModelRefController({sourceModel : new Stateful({current: getStateful(data)[0]})});
61                                        vfaModel = new Stateful();
62                                        vfaModel.set('session', new Stateful());
63                                        vfaModel.session.set("user","FirstUser");
64                                });
65                       
66                                replaceData = function(dest, src){
67                                        src = getPlainValue(src);
68                                        dest.set("current", getStateful(src));
69                                };
70                               
71                                       
72                                // when "dojo/ready" is ready call parser.parse
73                                ready(function(){
74                                        parser.parse();
75                                });
76                        });
77        </script>
78        </head>
79        <body class="claro">
80                <script type="dojo/require">at: "dojox/mvc/at"</script>
81                <script type="dojo/require">Stateful: "dojo/Stateful"</script>
82                <div id="wrapper">
83                        <div id="header">
84                                <div id="navigation"></div>
85                                <div id="headerInsert">
86                                        <h1>Input Ouput Sync</h1>
87                                        <h2>Data Binding Example</h2>
88                                </div>
89                        </div>
90                        <div id="main">
91                                <div id="leftNav"></div>
92                                <div id="mainContent">
93
94                                        <h4>Replace Model 1 data with original data from the models listed below, this should keep the bindings to the Model1 Output</h4>
95                                        <div class="row" style="width: 740px">
96                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){replaceData(model1, model1Data[0]);}">Replace with Orig. Model1 data</button>
97                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){replaceData(model1, model2Data[0]);}">Replace with Orig. Model2 data</button>
98                                                <button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){replaceData(model1, model3Data[0]);}">Replace with Orig. Model3 data</button>
99                                        </div>
100                               
101                                        <div id="outergroupId1x"         data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(model1, 'current')">
102                                                <div class="row">
103                                                                <label class="cell" for="nameInput${this.index}">Name:</label>
104                                                                <input class="cell" data-dojo-type="dijit.form.TextBox" id="fnameInput"
105                                                                        data-dojo-props="value: at('rel:', 'First')">
106                                                </div>
107                                                <div class="row">
108                                                                <label class="cell" for="nameInput${this.index}">Name:</label>
109                                                                <input class="cell" data-dojo-type="dijit.form.TextBox" id="lnameInput"
110                                                                        data-dojo-props="value: at('rel:', 'Last')">
111                                                </div>
112                                                <div class="row">
113                                                                <label class="cell" for="nameInput${this.index}">Name:</label>
114                                                                <input class="cell" data-dojo-type="dijit.form.TextBox" id="qnameInput"
115                                                                        data-dojo-props="value: at('rel:', 'Query')">
116                                                </div>
117                                        </div>
118                                        <div class="row" id="outputgroupId"      data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(model1, 'current')">
119                                                        <span>
120                                                                Model1 Output is ==&gt; 
121                                                        </span>
122                                                        <span id="firstnameOutput10" data-dojo-type="dojox.mvc.Output"
123                                                                data-dojo-props="value: at('rel:', 'First')">
124                                                                Name1 is "${this.value}" :
125                                                        </span>
126                                                        <span id="firstnameOutput11" data-dojo-type="dojox.mvc.Output"
127                                                                data-dojo-props="value: at('rel:', 'Last')">
128                                                                Name2 is "${this.value}" :
129                                                        </span>
130                                                        <span id="firstnameOutput12" data-dojo-type="dojox.mvc.Output"
131                                                                data-dojo-props="value: at('rel:', 'Query')">
132                                                                Name3 is "${this.value}" 
133                                                        </span>
134                                        </div>
135                                        <br/>Model:
136                                        <button id="reset" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){model1.reset();}">Reset all</button>
137
138                                        <div id="outergroupId2x"         data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(vfaModel, 'session')">
139                                                <div class="row">
140                                                                <label class="cell" for="configurationId">Session:</label>
141                                                                <input class="cell" data-dojo-type="dijit.form.TextBox" id="configurationId"
142                                                                        data-dojo-props="value: at('rel:', 'user')">
143                                                </div>
144                                        <button id="resetses" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){vfaModel.set('session', new Stateful());}">Reset session</button>
145                                        </div>
146
147                                </div>
148                        </div>
149                </div>
150        </body>
151</html>
Note: See TracBrowser for help on using the repository browser.