目标: 我想创建一个dojo小部件,其中包含一个继承dojox.mobile.View。
的独立模板//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并能够混合模板。
答案 0 :(得分:0)
您没有提到您正在使用的Dojo版本。最近发布的Dojo 1.9中引入了对模板View和其他移动小部件进行模板化的支持。因此,如果您使用的是旧版本,则需要升级。
1.9中可用的有用资源:
希望这有帮助,
阿德里安