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.
64 lines (61 loc) • 2.11 kB
HTML
<html>
<head>
<title>latebinding</title>
<link type="text/css" href="../../../../dojo/resources/dojo.css" />
<link type="text/css" href="../../../../dijit/themes/claro/claro.css" />
<script src="../../../../dojo/dojo.js"></script>
<script>
var model;
require([
'dojo/_base/declare',
'dojox/mvc',
'dojox/mvc/Group',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'dojox/mvc/StatefulModel',
'dojo/ready',
'dojo/parser',
'dijit/form/TextBox'
], function (declare, mvc, Group, _TemplatedMixin, _WidgetsInTemplateMixin, StatefulModel, ready, parser, TextBox) {
declare('test.TextBox', [TextBox], {
startup: function () {
console.log('starting...', this.id, this.binding);
this.inherited(arguments);
console.log('started', this.id, this.binding);
}
});
var testGroup = declare('test.Group', [Group], {
startup: function () {
console.log('starting...', this.id, this.binding);
this.inherited(arguments);
console.log('started', this.id, this.binding);
}
});
declare('test.Templated', [testGroup, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: '<div><input data-dojo-type="test.TextBox" data-dojo-props="ref: \'rel:fn\'"></div>'
});
model = new StatefulModel({ data: {fn: 'first', ln: 'last'}});
ready(function () {
parser.parse();
console.log('setting ref after parsing...');
dijit.byId('late').set('ref', model);
var prog = new test.Templated({
ref: model
}, 'prog');
prog.startup();
});
});
</script>
</head>
<body class="claro">
<h1>latebinding</h1>
<p>no template</p>
<div id="parsedGroup" data-dojo-type="test.Group" data-dojo-props="ref:model">
<input data-dojo-type="test.TextBox" data-dojo-props="ref: 'rel:fn'" id="parsedInput">
</div>
<p>Early parsed</p><div id="early" data-dojo-type="test.Templated" ref="model"></div>
<p>Late parsed</p><div id="late" data-dojo-type="test.Templated"></div>
<p>programmatic</p><div id="prog"></div>
</body>
</html>