You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.8 KiB
69 lines
1.8 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Simple programmatic data binding - Toggle example</title> |
|
<script> |
|
require = { |
|
parseOnLoad: 0, |
|
isDebug: 1, |
|
async: 1 |
|
}; |
|
</script> |
|
<script src="../../../dojo/dojo.js" type="text/javascript"></script> |
|
<style type="text/css"> |
|
@import "css/app-format.css"; |
|
@import "../../../dijit/themes/claro/claro.css"; |
|
</style> |
|
<script type="text/javascript"> |
|
require([ |
|
"dojo/dom", |
|
"dojo/parser", |
|
"dojo/Stateful", |
|
"dojox/mvc/at", |
|
"dijit/registry", |
|
"dijit/form/TextBox", |
|
"dijit/form/Button" |
|
], function(ddom, parser, Stateful, at, registry, TextBox){ |
|
var model = new Stateful({first: "John", last: "Doe"}); |
|
|
|
var fn = (new TextBox({id: "fn", value: at(model, 'first')})).placeAt(ddom.byId("mainContent")); |
|
fn.startup(); |
|
|
|
var ln = (new TextBox({id: "ln", value: at(model, 'last')})).placeAt(ddom.byId("mainContent")); |
|
ln.startup(); |
|
|
|
var count = 0; |
|
|
|
// Function below shows programmatic update of data-bound dijit refs |
|
toggleRefs = function(){ |
|
var fn = registry.byId("fn"), |
|
ln = registry.byId("ln"), |
|
state = ++count % 2; |
|
fn.set("value", at(model, state == 0 ? 'first' : 'last')); |
|
ln.set("value", at(model, state == 0 ? 'last' : 'first')); |
|
}; |
|
|
|
parser.parse(); |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body class="claro"> |
|
<div id="wrapper"> |
|
<div id="header"> |
|
<div id="navigation"></div> |
|
<div id="headerInsert"> |
|
<h1>Toggle</h1> |
|
<h2>Simple Example - Programmatic data binding.</h2> |
|
</div> |
|
</div> |
|
<div id="main"> |
|
<div id="leftNav"></div> |
|
<div id="mainContent"> |
|
<button id="toggle" type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: toggleRefs">Toggle Refs</button> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|