Question

我有一个名为Draggable的简单类，它有一个Moveable和一个click事件监听器：

define([
'dojo/dom',
'dojo/query',
'dojo/dom-style',
'dojo/dnd/Moveable',
'dojo/_base/declare'
], function(
dom,
query,
domStyle,
Moveable,
declare
){
return declare(null, {
    constructor: function(id){
        this.id = id;
        dom.byId('draggables').innerHTML +=
            '<div id="' + id + '" style="width: 100px; height: 100px; border: 1px solid #000;"></div>';
        this.moveable = new Moveable(id, {
            handle: dom.byId(id)
        });
        query('#' + id).on('click', function(){ console.log(id); });
    }
});
});

在主HTML文件index.html中，我只创建了两个Draggable，A和B实例：

<script>
require([
'dojo',
'dojo/query',
'extras/Draggable'
], function(
query,
Draggable
){
var a = new Draggable('A');
var b = new Draggable('B');
});
</script>

如果我单独创建了Draggable A（没有创建Draggable B），我可以拖动Draggable A，每当我点击它时，控制台都会记录＆＃34; A＆＃34;如预期的那样。

但是，一旦我创建了Draggables A和B（如代码所示），只能拖动Draggable B，只有当我点击Draggable B时，控制台才会记录＆＃34; B＆＃34;。好像Draggable B创建的那一刻，Draggable A失去了Moveable及其事件监听器！

Answer 1

嗯，你最好采取另一种方式。设计的可移动类使您无法在窗口小部件中将其用作mixin。它的构造函数需要一个节点作为参数，而模板化的小部件此时没有节点，除了srcNodeRef，如果它已被传递。

所以，我建议你做以下事情：

1 创建没有Movable类的模板化小部件。如果需要，请附加您的事件监听器。如果您正确使用data-dojo-attach-event属性或您喜欢的任何其他方式，它将开箱即用而不会发生任何冲突。小部件代码可能如下所示：

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin"
], function (
    declare,
    _WidgetBase,
    _TemplatedMixin
) {
    "use strict";
    return declare("Draggable", [_WidgetBase, _TemplatedMixin], {
        templateString: "<div data-dojo-attach-event='click: clickHandler' style='width: 100px; height: 100px; border: 1px solid #000'>draggable div</div>",
        clickHandler: function (e) {
            console.log("Clicked:", this.id, e);
        }
    });
});

2 在您网页的某个位置，您将创建自己的小部件，并使其像以下一样移动：

    <script>
        require(["dojo/dnd/Moveable", "Draggable"], function (Movable, Draggable){
            let d1 = new Draggable();
            d1.placeAt("myContainer");

            let d2 = new Draggable();
            d2.placeAt("myContainer");

            let m1 = new Movable(d1.domNode);
            let m2 = new Movable(d2.domNode);

        });
    </script>

    <div id="myContainer"></div>

我已经测试过，它对我有用。希望它会有所帮助;

Dojo类事件侦听器在后续实例化时消失

1 个答案: