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.
119 lines
4.3 KiB
119 lines
4.3 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Static Master/Detail Pattern -- Multiple Address Detail example</title> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad: 0, isDebug: true, mvc: {debugBindings: true}"> |
|
</script> |
|
<style type="text/css"> |
|
@import "css/app-format.css"; |
|
@import "../../../dijit/themes/claro/claro.css"; |
|
</style> |
|
<script type="text/javascript" > |
|
var model1 = [ |
|
{ |
|
First: "Anne1", |
|
Last: "Ackerman1" |
|
}, |
|
{ |
|
First: "Ben1", |
|
Last: "Beckham1" |
|
}, |
|
{ |
|
First: "Chad1", |
|
Last: "Chapman1" |
|
} |
|
], model2 = [ |
|
{ |
|
First: "Anne2", |
|
Last: "Ackerman2" |
|
}, |
|
{ |
|
First: "Ben2", |
|
Last: "Beckham2" |
|
} |
|
], model3 = [ |
|
{ |
|
First: "", |
|
Last: "" |
|
} |
|
], showOutput; |
|
|
|
require([ |
|
"dojo/parser", |
|
"dijit/registry", |
|
"dijit/_Container", |
|
"dijit/form/TextBox", |
|
"dijit/form/Button", |
|
"dojox/mvc/Group", |
|
"dojox/mvc/Output", |
|
"dojox/mvc/Repeat", |
|
"dojo/domReady!" |
|
], function(parser, registry){ |
|
|
|
refreshOutput = function(){ |
|
registry.byId("out1").set("target", model1.slice()); |
|
registry.byId("out2").set("target", model2.slice()); |
|
registry.byId("out3").set("target", model3.slice()); |
|
} |
|
|
|
parser.parse(); |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro"> |
|
<script type="dojo/require">at: "dojox/mvc/at"</script> |
|
<div id="wrapper"> |
|
<div id="header"> |
|
<div id="navigation"></div> |
|
<div id="headerInsert"> |
|
<h1>Input Output Sync</h1> |
|
<h2>Data Binding Example</h2> |
|
</div> |
|
</div> |
|
<div id="main"> |
|
<div id="leftNav"></div> |
|
<div id="mainContent"> |
|
<div class="row"> |
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){ dijit.byId('repeatId').set('children', model1); }">Swap Model1</button> |
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){ dijit.byId('repeatId').set('children', model2); }">Swap Model2</button> |
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: function(){ dijit.byId('repeatId').set('children', model3); }">Swap Model3</button> |
|
</div> |
|
<div id="repeatId" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="children: model1"> |
|
<div class="row" data-dojo-type="dojox.mvc.Group" data-dojo-props="target: at('rel:${this.index}')"> |
|
<label class="cell" for="nameInput${this.index}">Name:</label> |
|
<input class="cell" data-dojo-type="dijit.form.TextBox" id="nameInput${this.index}" |
|
data-dojo-props="value: at('rel:', 'First')"> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div>Given the data models are not stateful objects, the change in models is not automatically notified to widgets.</div> |
|
<button type="button" data-dojo-type="dijit.form.Button" data-dojo-props="onClick: refreshOutput">Refresh model outputs</button> |
|
</div> |
|
<div id="out1" class="row" data-dojo-type="dijit._WidgetBase" data-dojo-props="target: model1"> |
|
<span> |
|
Model1 Output is ==> |
|
</span> |
|
Name1 is "<span id="firstnameOutput10" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:0', 'First')"></span>" : |
|
Name2 is "<span id="firstnameOutput11" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:1', 'First')"></span>" : |
|
Name3 is "<span id="firstnameOutput12" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:2', 'First')"></span>" |
|
</div> |
|
<div id="out2" class="row" data-dojo-type="dijit._WidgetBase" data-dojo-props="target: model2"> |
|
<span> |
|
Model2 Output is ==> |
|
</span> |
|
Name1 is "<span id="firstnameOutput20" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:0', 'First')"></span>" : |
|
Name2 is "<span id="firstnameOutput21" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:1', 'First')"></span>" |
|
</div> |
|
<div id="out3" class="row" data-dojo-type="dijit._WidgetBase" data-dojo-props="target: model3"> |
|
<span> |
|
Model3 Output is ==> |
|
</span> |
|
Name1 is "<span id="firstnameOutput30" data-dojo-type="dojox.mvc.Output" data-dojo-props="value: at('rel:0', 'First')"></span>" |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|