source: Dev/trunk/src/client/dojox/mvc/tests/test_async-mvc_group-simple.html

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

Added Dojo 1.9.3 release.
File size: 3.6 KB
Line 
1<!DOCTYPE html>
2<html>
3        <head>
4                <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5                <title>Async Simple Input - Output Group example</title>
6                <style type="text/css">
7                        @import "css/app-format.css";
8                        @import "../../../dijit/themes/claro/claro.css";
9                </style>
10                <script type="text/javascript">
11                        require = {
12                                async: 1,
13                                parseOnLoad: 0,
14                                isDebug: 1,
15                                mvc: {debugBindings: 1}
16                        };
17                </script>
18                <script type="text/javascript" src="../../../dojo/dojo.js"></script>
19                <script type="text/javascript">
20                        require([
21                                "dojo/parser",
22                                "dojo/Stateful",
23                                "dojox/mvc/EditModelRefController",
24                                "dojox/mvc/EditStoreRefController",
25                                "dojo/store/Memory",
26                                "dojox/mvc/getStateful",
27                                "dijit/form/Button",
28                                "dijit/form/TextBox",
29                                "dojox/mvc/Group",
30                                "dojox/mvc/parserExtension",
31                                "dojo/domReady!"
32                        ], function(parser, Stateful, EditModelRefController, EditStoreRefController, Memory, getStateful){
33                                var testmem = new Memory({data: {First: "John", Last: "Doe", Email: "jdoe@example.com"}});
34                                var testdata = testmem.query();
35                                console.log("testdata = ",testdata);
36                                var testmem2 = new Memory({data: {identifier: "id", items: [{id: "emp0", First: "John", Last: "Doe", Email: "jdoe@example.com"}]}});
37                                var testdata2 = testmem2.query();
38                                console.log("testdata2 = ",testdata2);
39                               
40                                ctrl1 = new EditStoreRefController({sourceModel: new Stateful({First: "John", Last: "Doe", Email: "jdoe@example.com"})});
41                                ctrl2 = new EditStoreRefController({sourceModel: new Stateful(testdata)});
42                                console.log("ctrl2 = ",ctrl2);
43                                ctrl3 = new EditStoreRefController({store: new Memory({data: {items: [{id: "emp0", First: "John", Last: "Doe", Email: "jdoe@example.com"}]}})});
44                                ctrl3.queryStore({});
45                                ctrl = new EditStoreRefController({store: new Memory({data: {identifier: "id", items: [{id: "emp0", First: "John", Last: "Doe", Email: "jdoe@example.com"}]}})});
46                                ctrl.getStore("emp0");                         
47                                console.log("ctrl = ",ctrl);
48                                parser.parse();
49                        });
50                </script>
51        </head>
52        <body class="claro">
53                <script type="dojo/require">at: "dojox/mvc/at"</script>
54                <div id="wrapper">
55                        <div id="header">
56                                <div id="navigation"></div>
57                                <div id="headerInsert">
58                                        <h1>Input Ouput Sync</h1>
59                                        <h2>Data Binding Example</h2>
60                                </div>
61                        </div>
62                        <div id="main">
63                                <div id="leftNav"></div>
64                                <div id="mainContent" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at(ctrl, 'model')">
65                                        <div class="row">
66                                                <label class="cell" for="firstnameInput">First:</label>
67                                                <input class="cell" id="firstnameInput" data-dojo-type="dijit.form.TextBox"
68                                                                data-dojo-props="value: at('rel:', 'First')">
69                                                <!-- Content in output below will always be in sync with value of textbox above -->
70                                                (first name is: <span data-mvc-bindings="innerText: at('rel:', 'First')"></span>)
71                                        </div>
72                                        <div class="row">
73                                                <label class="cell" for="lastnameInput">Last:</label>
74                                                <input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox"
75                                                                data-dojo-props="value: at('rel:', 'Last')">
76                                                (last name is: <span data-mvc-bindings="innerText: at('rel:', 'Last')"></span>)
77                                        </div>
78                                        <div class="row">
79                                                <label class="cell" for="emailInput">Email:</label>
80                                                <input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox"
81                                                                data-dojo-props="value: at('rel:', 'Email')">
82                                                (email is: <span data-mvc-bindings="innerText: at('rel:', 'Email')"></span>)
83                                        </div>
84                                        <br/>Model:
85                                        <button id="reset" type="button" data-dojo-type="dijit.form.Button"
86                                                                data-dojo-props="onClick: function(){ ctrl.reset(); }">Reset</button>
87                                </div>
88                        </div>
89                </div>
90        </body>
91</html>
Note: See TracBrowser for help on using the repository browser.