javascript - jquery widget 在创建多个实例时共享数据

Question

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

我似乎错误地使用了小部件工厂。提前感谢您的帮助!

这是小部件代码。

$.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: [],