继承dojox.mobile.View并使用Template Mixin

时间:2013-05-19 09:01:31

标签: dojo dojox.mobile

目标: 我想创建一个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并能够混合模板。

1 个答案:

答案 0 :(得分:0)

您没有提到您正在使用的Dojo版本。最近发布的Dojo 1.9中引入了对模板View和其他移动小部件进行模板化的支持。因此,如果您使用的是旧版本,则需要升级。

1.9中可用的有用资源:

希望这有帮助,

阿德里安