目标：我想创建一个带有继承dojox.mobile.View 的单独模板的dojo 小部件。
//Javascript
define([
"dojo/_base/declare",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!./templates/myAppview.html",
"dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat",
"require",
"dojox/mobile/ListItem",
"dojox/mobile/Heading"],
function (declare, _TemplatedMixin, _WidgetsInTemplateMixin, template, mobile, deviceTheme, compat, require) {
return declare("widgets.myApp.myAppView", [dojox.mobile.View, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: template,
widgetsInTemplate: true,
widgetBase: require.toUrl("widgets/myApp/"),
constructor: function (params) {
params = params || {};
console.log("constructor" + dojo.toJson(params));
},
startup: function () {
this.inherited(arguments);
},
postCreate: function () {
this.inherited(arguments);
}
});
});
模板
<div>
<div data-dojo-type="dojox/mobile/Heading" data-dojo-props="label: 'Templated View'">
</div>
</div>
用法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript" charset="utf-8" src="globals.js"></script>
<script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
<script type="text/javascript">
require([
"dojo/parser",
"widgets/myApp/myAppView",
"dojo/domReady",
"dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat"
],
function (parser, myApp, ready) {
parser.parse();
myApp = new widgets.myApp.myAppView();
myApp.placeAt("kj");
myApp.startup();
});
</script>
<div id="kj">
</div>
<!--Crash-->
<div data-dojo-type="widgets.myApp.myAppView">
</div>
</body>
</html>
如果我以编程方式创建小部件，它会启动但它不包含模板。如果我在<div data-dojo-type="widgets.myApp.myAppView">它冻结时创建它。
如果我只是继承 dojox.mobile.View 并在 postCreate 中以编程方式添加其他小部件，一切正常。但是，为了保持结构的可维护性，我确实需要能够继承 dojox.mobile.View 并能够混合模板。