Question

我已经构建了一个Dojo Widget，用于通过输入值来创建列表。小部件代码是： 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: []

    });
});

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: [] }); });

一切都好。但是 - 当我在同一个对话框上实例化它两次时：

然后要求allowDomains.itemsArray（）或pdlEmails.itemsArray（） - 我得到相同的列表（就好像它是相同的实例） - 在UI演示中也是如此 - 他单独且正确地添加了列表项。 / p>

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

是否有人知道我应该做些什么才能使其发挥作用？

由于

Answer 1

使用declare创建dojo类时，对象和数组成员是静态的，这意味着它们是跨实例共享的，因此我建议在itemsArray: null中执行this.itemsArray = []然后constructor或postCreate某处。

其他一切看起来都不错，虽然我也倾向于使用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");
    }
}

相同小部件的Dojo实例不会分开

2 个答案: