| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|---|
| 5 | <title>Simple programmatic data binding - Toggle example</title> |
|---|
| 6 | <script> |
|---|
| 7 | require = { |
|---|
| 8 | parseOnLoad: 0, |
|---|
| 9 | isDebug: 1, |
|---|
| 10 | async: 1 |
|---|
| 11 | }; |
|---|
| 12 | </script> |
|---|
| 13 | <script src="../../../dojo/dojo.js" type="text/javascript"></script> |
|---|
| 14 | <style type="text/css"> |
|---|
| 15 | @import "css/app-format.css"; |
|---|
| 16 | @import "../../../dijit/themes/claro/claro.css"; |
|---|
| 17 | </style> |
|---|
| 18 | <script type="text/javascript"> |
|---|
| 19 | require([ |
|---|
| 20 | "dojo/dom", |
|---|
| 21 | "dojo/parser", |
|---|
| 22 | "dojo/Stateful", |
|---|
| 23 | "dojox/mvc/at", |
|---|
| 24 | "dijit/registry", |
|---|
| 25 | "dijit/form/TextBox", |
|---|
| 26 | "dijit/form/Button" |
|---|
| 27 | ], function(ddom, parser, Stateful, at, registry, TextBox){ |
|---|
| 28 | var model = new Stateful({first: "John", last: "Doe"}); |
|---|
| 29 | |
|---|
| 30 | var fn = (new TextBox({id: "fn", value: at(model, 'first')})).placeAt(ddom.byId("mainContent")); |
|---|
| 31 | fn.startup(); |
|---|
| 32 | |
|---|
| 33 | var ln = (new TextBox({id: "ln", value: at(model, 'last')})).placeAt(ddom.byId("mainContent")); |
|---|
| 34 | ln.startup(); |
|---|
| 35 | |
|---|
| 36 | var count = 0; |
|---|
| 37 | |
|---|
| 38 | // Function below shows programmatic update of data-bound dijit refs |
|---|
| 39 | toggleRefs = function(){ |
|---|
| 40 | var fn = registry.byId("fn"), |
|---|
| 41 | ln = registry.byId("ln"), |
|---|
| 42 | state = ++count % 2; |
|---|
| 43 | fn.set("value", at(model, state == 0 ? 'first' : 'last')); |
|---|
| 44 | ln.set("value", at(model, state == 0 ? 'last' : 'first')); |
|---|
| 45 | }; |
|---|
| 46 | |
|---|
| 47 | parser.parse(); |
|---|
| 48 | }); |
|---|
| 49 | |
|---|
| 50 | </script> |
|---|
| 51 | </head> |
|---|
| 52 | <body class="claro"> |
|---|
| 53 | <div id="wrapper"> |
|---|
| 54 | <div id="header"> |
|---|
| 55 | <div id="navigation"></div> |
|---|
| 56 | <div id="headerInsert"> |
|---|
| 57 | <h1>Toggle</h1> |
|---|
| 58 | <h2>Simple Example - Programmatic data binding.</h2> |
|---|
| 59 | </div> |
|---|
| 60 | </div> |
|---|
| 61 | <div id="main"> |
|---|
| 62 | <div id="leftNav"></div> |
|---|
| 63 | <div id="mainContent"> |
|---|
| 64 | <button id="toggle" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: toggleRefs">Toggle Refs</button> |
|---|
| 65 | </div> |
|---|
| 66 | </div> |
|---|
| 67 | </div> |
|---|
| 68 | </body> |
|---|
| 69 | </html> |
|---|
