joken-前端工程师

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::
dojo1.x版本自定义组件

dojo1.x版本自定义组件

<!DOCTYPE html>
<html>
<head>
    <title>Dojo 1.x Custom Component Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script>
    <script>
        define("my/Counter", [
            "dojo/_base/declare",
            "dijit/_WidgetBase",
            "dijit/_TemplatedMixin",
            "dojo/on",
            "dojo/dom-construct"
        ], function(declare, _WidgetBase, _TemplatedMixin, on, domConstruct) {
            return declare([_WidgetBase, _TemplatedMixin], {
                templateString: '<div><h1>Count: <span data-dojo-attach-point="countNode"></span></h1><button data-dojo-attach-point="incrementButton">Increment</button></div>',
                initialCount: 0,
                postCreate: function() {
                    this.inherited(arguments);
                    this.countNode.innerHTML = this.initialCount;
                    on(this.incrementButton, "click", this._incrementCount.bind(this));
                },
                _incrementCount: function() {
                    this.initialCount++;
                    this.countNode.innerHTML = this.initialCount;
                }
            });
        });
    </script>
</head>
<body>
    <div data-dojo-type="my/Counter" data-dojo-props="initialCount: 0"></div>

    <script>
        require(["dojo/parser", "dojo/domReady!"], function(parser) {
            parser.parse();
        });
    </script>
</body>
</html>

运行效果

image

posted on 2025-07-12 19:00  joken1310  阅读(7)  评论(0)    收藏  举报