source: Dev/trunk/src/client/dojox/mvc/tests/test_mvc_input-output-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.2 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                <style type="text/css">
7                        @import "css/app-format.css";
8                        @import "../../../dijit/themes/claro/claro.css";
9                        .row { width: 500px; display: inline-block; margin: 5px; }
10                        .cell { width: 20%;  display:inline-block; }
11                        .textcell { width: 30%;  display:inline-block; }
12                </style>
13                <script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../dojo/dojo.js"></script>
14                <script type="text/javascript">
15                        require([
16                                "dojo/parser",
17                                "dojo/Stateful",
18                                "dojox/mvc/EditModelRefController",
19                                "dijit/registry",
20                                "dijit/form/TextBox",
21                                "dijit/form/Button",
22                                "dojox/mvc/Group",
23                                "dojox/mvc/Output"
24                        ], function(parser, Stateful, EditModelRefController){
25                                ctrl = new EditModelRefController({sourceModel: new Stateful({First: "John", Last: "Doe", Email: "jdoe@example.com"})});
26                                parser.parse();
27                        });
28                </script>
29        </head>
30        <body class="claro">
31                <script type="dojo/require">at: "dojox/mvc/at"</script>
32                <div id="wrapper">
33                        <div id="header">
34                                <div id="navigation"></div>
35                                <div id="headerInsert">
36                                        <h1>Input Ouput Sync</h1>
37                                        <h2>Data Binding Example</h2>
38                                </div>
39                        </div>
40                        <div id="main">
41                                <div id="leftNav"></div>
42                                <div id="mainContent">
43                                        <div class="row">
44                                                <label class="cell" for="firstnameInput">First:</label>
45                                                <input id="firstId" class="cell" id="firstnameInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at(ctrl, 'First')">
46                                                <!-- Content in output below will always be in sync with value of textbox above -->
47                                                (first name is: <span data-dojo-type="dijit._WidgetBase" data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at(ctrl, 'First')"></span>)
48                                        </div>
49                                        <div class="row">
50                                                <label class="cell" for="lastnameInput">Last:</label>
51                                                <input class="cell" id="lastnameInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at(ctrl, 'Last')">
52                                                (last name is: <span data-dojo-type="dijit._WidgetBase" data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at(ctrl, 'Last')"></span>)
53                                        </div>
54                                        <div class="row">
55                                                <label class="cell" for="emailInput">Email:</label>
56                                                <input class="cell" id="emailInput" data-dojo-type="dijit.form.TextBox" data-dojo-props="value: at(ctrl, 'Email')">
57                                                (email is: <span data-dojo-type="dijit._WidgetBase" data-dojo-props="_setValueAttr: {node: 'domNode', type: 'innerText'}, value: at(ctrl, 'Email')"></span>)
58                                        </div>
59                                        <br/>Model:
60                                        <button id="reset" type="button" data-dojo-type="dijit.form.Button"  data-dojo-props="onClick: function(){ ctrl.reset(); }">Reset</button>
61                                        <button id="fromModel" type="button" data-dojo-type="dijit.form.Button"
62                                         data-dojo-props="onClick: function(){ ctrl.set('First','Updated in Model'); }">Update First from Model</button>
63                                        <button id="fromWidget" type="button" data-dojo-type="dijit.form.Button"
64                                         data-dojo-props="onClick: function(){ dijit.registry.byId('firstId').set('value', 'Updated Widget'); }">Update First from Widget</button>
65                                </div>
66                        </div>
67                </div>
68        </body>
69</html>
Note: See TracBrowser for help on using the repository browser.