dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
65 lines (58 loc) • 1.85 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Simple programmatic data binding - Toggle example</title>
<script src="../../../../dojo/dojo.js"
type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true">
</script>
<style type="text/css">
@import "css/app-format.css";
@import "../../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" >
dojo.require("dojox.mvc");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");
// Function below shows programmatic creation of data-bound dijits
function addBoundDijits(){
var model = dojox.mvc.newStatefulModel({ data: { first: "John", last: "Doe" }});
var fn = new dijit.form.TextBox({id: "fn", ref: model.first});
fn.placeAt(dojo.byId("mainContent"));
fn.startup();
var ln = new dijit.form.TextBox({id: "ln", ref: model.last});
ln.placeAt(dojo.byId("mainContent"));
ln.startup();
}
// Function below shows programmatic update of data-bound dijit refs
function toggleRefs(){
var fn = dijit.byId("fn"), ln = dijit.byId("ln");
var ref = fn.get("ref");
fn.set("ref", ln.get("ref"));
ln.set("ref", ref);
}
dojo.addOnLoad(addBoundDijits);
</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>