相同小部件的 Dojo 实例不分离

Question

我已经构建了一个 Dojo 小部件，用于通过输入值来创建列表。小部件代码是： define(["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", 'dojo/text!apps/orders/templates/multiAddList.html', "dojo/dom", "dojo/on", "dojo/dom-construct", "dojo/dom-class", "dojo/query", "dijit/focus"],

function (declare, WidgetBase, TemplatedMixin, html, dom, on, domConstruct, domClass, query, focusUtil) {

    return declare([WidgetBase, TemplatedMixin], {

        templateString: html,

        postCreate: function () {
            this.inherited(arguments);
            var that = this;
        },

        _checkIfEnter: function (e) {
            if (e.which == 13) {
                this._addUser();
            }
        },

        _addUser: function () {
            domClass.remove(this.ulAdded, "hidden");
            var textToAdd = this.userTextToAdd.value;
            var li = domConstruct.create("li", {}, this.ulAdded);
            domConstruct.create("span", {innerHTML: textToAdd}, li);
            var spanX = domConstruct.create("span", {class: 'icon-x right'}, li);
            this.itemsArray.push(textToAdd);
            this.userTextToAdd.value = "";
            focusUtil.focus(this.userTextToAdd);
            var that = this;
            on(spanX, "click", function () {
                domConstruct.destroy(li);
                that.itemsArray.splice(that.itemsArray.indexOf(textToAdd), 1);
                if (that.itemsArray.length == 0) {
                    domClass.add(that.ulAdded, "hidden");
                }
            });
        },

        itemsArray: []

    });
});

一切正常。但是 - 当我在这样的同一个对话框中实例化它两次时：

allowedDomains = new MultiAddList();
allowedDomains.placeAt(dom.byId('allowedDomains'), 0);
pdlEmails = new MultiAddList();
pdlEmails.placeAt(dom.byId('pdlEmails'), 0);

然后询问 allowedDomains.itemsArray() 或 pdlEmails.itemsArray() - 我得到了相同的列表（就好像它是同一个实例一样） - 虽然在 UI 演示中有所考虑 - 他分别且正确地添加了列表项。

显然，尽管我遵循了 Dojo 示例，但我做错了。

有谁知道我应该怎么做才能让它发挥作用？

谢谢

Answer 1

当您使用声明创建一个dojo 类时，对象和数组成员是静态的，这意味着它们在实例之间共享，所以我建议在constructor 或postCreate 某处执行itemsArray: null 然后this.itemsArray = []。

其他一切看起来都很好，虽然我也更喜欢使用hitch，但您的解决方案非常好。

Answer 2

很抱歉只是给你一个提示，但你可能想看看 dojo.hicth() 函数，作为“this-that”构造的替代方法

on(spanX, "click", dojo.hitch(this, function () {
            domConstruct.destroy(li);
            this.itemsArray.splice(this.itemsArray.indexOf(textToAdd), 1);
            if (this.itemsArray.length == 0) {
                domClass.add(this.ulAdded, "hidden");
            }
        }));

on-construct 是一个很好的结构，但仅测试这种结构可能会告诉您这是否是问题所在。

_addUser: function () {
    .....
    .....
    dojo.connect(spanX, "click", this, this.spanClicked);
    or
    dojo.connect(spanX, "click", dojo.hitch(this, this.spanClicked);
},
spanClicked: function(args) {
    domConstruct.destroy(li); //need to keep some reference to li
    this.itemsArray.splice(this.itemsArray.indexOf(textToAdd), 1);
    if (that.itemsArray.length == 0) {
        domClass.add(this.ulAdded, "hidden");
    }
}