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.
117 lines (107 loc) • 4.39 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>DOH Async Late Binding Template Input - Output Group example</title>
<style type="text/css">
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/tests/css/dijitTests.css";
@import "../css/app-format.css";
@import "../../../../dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1, mvc: {debugBindings: 1}" src="../../../../dojo/dojo.js"></script>
<script type="text/javascript">
var model;
require([
'dojo/_base/declare',
'dojox/mvc/at',
'dojox/mvc/EditModelRefController',
'dojox/mvc/ModelRefController',
'dojo/Stateful',
'dojox/mvc/Group',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'dojox/mvc/StatefulModel',
'dojo/ready',
'dojo/parser',
'dijit/form/TextBox'
], function (declare, at, EditModelRefController, ModelRefController, Stateful, Group, _TemplatedMixin,
_WidgetsInTemplateMixin, StatefulModel, ready, parser, TextBox) {
declare('test.TextBox', [TextBox], {
startup: function () {
console.log('starting...', this.id, this._refs.value.targetProp);
this.inherited(arguments);
console.log('started', this.id, this._refs.value.targetProp);
}
});
var testGroup = declare('test.Group', [Group], {
startup: function () {
console.log('starting...', this.id);
this.inherited(arguments);
console.log('started', this.id);
}
});
declare('test.Templated', [testGroup, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: '<div><input data-dojo-type="test.TextBox" data-dojo-props="value: at(\'rel:\', \'fn\')"></div>'
});
// All 3 of these models work
//model = new EditModelRefController({sourceModel: new Stateful({fn: 'first', ln: 'last'})});
//model = new Stateful({fn: 'first', ln: 'last'});
model = new ModelRefController({model: new Stateful({fn: 'first', ln: 'last'})});
require([
'doh/runner', 'dijit/dijit'
], function(){
require([
'dojo/domReady!'
], function(){
doh.register("parse", function() {
parser.parse();
console.log('setting ref after parsing...');
dijit.byId('late').set('target', model);
var prog = new test.Templated({
target: model
}, 'prog');
prog.startup();
});
// should be able to verify all of the inputs
doh.register("check initial values", [{
name : "initial",
runTest : function() {
doh.is("first", dijit.byId("parsedInput").get('value'),"parsedInput should be first");
doh.is("first", dijit.byId("test_TextBox_0").get('value'),"test_TextBox_0 should be first");
doh.is("first", dijit.byId("test_TextBox_1").get('value'),"test_TextBox_1 should be first");
doh.is("first", dijit.byId("test_TextBox_2").get('value'),"test_TextBox_2 should be first");
}
}]);
doh.register("update first", [{
name : "Update-first",
runTest : function() {
var first1;
first1 = dijit.byId("parsedInput");
first1.set("value","first-update");
if (first1) {
doh.is("first-update", dijit.byId("parsedInput").get('value'),"parsedInput should be first-update");
doh.is("first-update", dijit.byId("test_TextBox_0").get('value'),"test_TextBox_0 should be first-update");
doh.is("first-update", dijit.byId("test_TextBox_1").get('value'),"test_TextBox_1 should be first-update");
doh.is("first-update", dijit.byId("test_TextBox_2").get('value'),"test_TextBox_2 should be first-update");
}
}
}]);
doh.run();
});
});
});
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<h1>late binding</h1>
<p>no template</p>
<div id="parsedGroup" data-dojo-type="test.Group" data-dojo-props="target : model">
<input data-dojo-type="test.TextBox" data-dojo-props="value: at('rel:', 'fn')" id="parsedInput">
</div>
<p>Early parsed</p><div id="early" data-dojo-type="test.Templated" data-dojo-props="target : model"></div>
<p>Late parsed</p><div id="late" data-dojo-type="test.Templated"></div>
<p>programmatic</p><div id="prog"></div>
</body>
</html>