jquery小部件在创建多个实例时共享数据

Question

我创建了一个jquery小部件,一切正常,直到我需要另一个实例.就在那时我注意到这两个实例共享相同的数据.该插件应该跟踪在表中检查哪些行,所以我不必每次我需要使用它们时计算它们.如果我在两个表上实例化小部件,请在一个表上单击一行 - 两个表将具有相同的数据.两个表都会发生这种情况.我只创建了几个jquery小部件,所以我不确定这是怎么发生的,但是我已经完成了代码并且可以看到它发生了.

好像我错误地使用了widget工厂.在此先感谢您的帮助!

这是小部件代码.

$.widget('ui.selectAndFilter', {
_init: function () {

},
_create: function () {
    var self = this;
    self.options.$mainTable = $(self.element).addClass(this.options.cssWidgetClass);

    self.options.$mainTable.find('tbody tr').bind('click', function (e) {
        self._onClick(e, $(this), false);
        //Need to determine what todo with last param - redrawTables
    });
},
options: {
    cssWidgetClass: 'select-and-filter',
    cssSelectedClass: 'selected',
    $mainTable: {},
    childTables: [],
    canMultiSelect: false,
    clickFinishedCallbacks: [],
    minCount: 1
},
destroy: function () {
    $(this.element).removeClass(this.options.cssWidgetClass);
},
_checkedIds: [],    
checkRow: function ($tr) {
    if ($.isDigit($tr))
        $tr = $(this.options.$mainTable.find('tbody tr:eq(' + $tr + ')'));
    if ($tr.length) {
        var id = $tr.addClass(this.options.cssSelectedClass).find(':checkbox').attr('checked', true).val();
        this._addId(id);
    }
    return this;
},
_uncheckRow: function ($tr) {
    if ($tr.length) {
        var id = $tr.removeClass(this.options.cssSelectedClass).find(':checkbox').attr('checked', false).val();
        return this._removeId(id);
    }
},
uncheckAllRows: function () {
    var self = this;
    this.options.$mainTable.find('tr.' + this.options.cssSelectedClass).each(function () {
        self._uncheckRow($(this));
    });
    return self;
},
_removeId: function (id) {
    this._checkedIds.splice(this._checkedIds.indexOf(id), 1);
    return this._checkedIds;
},
_addId: function (id) {
    if (this._checkedIds.indexOf(id) == -1)
        this._checkedIds.push(id);
    return this._checkedIds;
},
_onClick: function (event, $tr, redrawTables) {
    if ($tr.hasClass(this.options.cssSelectedClass) && this._checkedIds.length > this.options.minCount) {
        this._uncheckRow($tr);
    } else {
        if (!this.options.canMultiSelect) {
            this.uncheckAllRows();
        }
        this.checkRow($tr);
    }

    this.redrawTables();
    this._trigger('click');

},
redrawTables: function () {
    $.each(this.options.childTables, function () {
        this.fnDraw();
    });
},
checkedIds: function () {
    return this._checkedIds;
}


});

然后是实例化它们的代码.

tables['schedule'].selectAndFilter({canMultiSelect:selectMulti, childTables: redrawTables});
tables['start'].selectAndFilter({canMultiSelect: selectMulti})
tables['batch'].selectAndFilter({minCount:0});

Answer 1

问题是_checkedIds数组对于窗口小部件是全局的,而不是在单个上下文中.

将此行添加到_create方法:

this._checkedIds = [];

并从小部件中删除了这一行:

_checkedIds: [],