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.
85 lines (75 loc) • 2.08 kB
HTML
<html >
<head>
<style type="text/css">
@import "../../../../dijit/themes/claro/claro.css";
</style>
<script src="../../../../dojo/dojo.js" data-dojo-config='parseOnLoad: true, mvc: {debugBindings: true}'></script><script>var searchRecords;
</script>
<script>
/* BEGIN .. js :: Things in this section have to be two tabs in */
require([
"dojo/parser",
"dojo/_base/json",
"dijit/form/Textarea",
"dojox/mvc/Generate"
], function(parser){
parser.parse();
});
/* END .. js :: */
</script>
</head>
<body class="claro">
<!-- BEGIN .. html :: THINGS IN HERE START TWO TABS IN -->
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div id="wrapper">
<div id="header">
<div id="navigation"></div>
<div id="headerInsert">
<h1>View generation example</h1>
<h2>Data Binding - Generate Container.</h2>
</div>
</div>
<div id="main">
<div id="leftNav"></div>
<div id="mainContent">
<h3>Model</h3>
<div class="row">
<textarea id="textarea" class="cell" data-dojo-type="dijit/form/Textarea">
{
Serial: "360324",
First: "John",
Last: "Doe",
Email: "jdoe@example.com",
Address: {
Street: "123 Valley Rd",
City: "Katonah",
State: "NY",
Zip: "10536"
},
Phones: [
{
Areacode: "111",
Local: "111-1111"
},{
Areacode: "222",
Local: "222-2222"
}
],
Member: {
Since: "2010",
Type: "Gold"
}
}
</textarea>
</div>
<h3>Generated View</h3>
<div data-dojo-type="dojox/mvc/Generate"
data-dojo-props="children: at('widget:textarea', 'value').direction(at.from).transform({format: dojo.fromJson}), idNameMapping: {String: 'view_t'}"></div>
</div>
</div>
</div>
<p>In the above example, the Generate will create a view with a label and TextBox for each of the fields listed in the textarea, and any updates to the textarea will be cause the view to be updated when you tab out of the text area.</p>
<!-- END .. html :: THINGS IN HERE START TWO TABS IN -->
</body>
</html>