我正在尝试在 jsgrid 中的所有行选择标题中添加一个复选框,如图 here 。它运行良好。但是,我尝试将这些函数放入 IIFE 中,而不是将所有代码放在一个页面中,如下所示。
var jsgridCheckBox = (function() {
var selectedItems = [];
var selectItem = function(item) {
selectedItems.push(item);
...
};
var unselectItem = function(item) {
selectedItems = $.grep(selectedItems, function(i) {
return i !== item;
});
...
};
var selectAllCheckBox = function(item) {
selectedItems = [];
if (this.checked) {
...
}
};
return {
selectedItems: selectedItems,
selectItem: selectItem,
unselectItem: unselectItem,
selectAllCheckBox: selectAllCheckBox
}
})();
在 JSGrid 中,
$(function() {
$("#jsGrid").jsGrid(
...
fields: [
itemTemplate: function(_, item) {
return $("<input>").attr("type", "checkbox").attr("class", "singleCheckbox")
.prop("checked", $.inArray(item, jsgridCheckBox.selectedItems) > -1)
.on("change", function() {
$(this).is(":checked") ? jsgridCheckBox.selectItem(item) : jsgridCheckBox.unselectItem(item);
});
}
...
]
});
});
选择复选框后,当我尝试按如下方式调用它时
var dialog = $("#dialog-form").dialog({
buttons: {
"Reject": rejectRequest,
}
});
function rejectRequest() {
alert(jsgridCheckBox.selectedItems.length);
for (var i = 0; i < jsgridCheckBox.selectedItems.length; i++) {
alert(jsgridCheckBox.selectedItems[i].some_id);
...
}
...
}
它总是返回0
。 jsgridCheckBox 是否总是返回一个新的实例?如何在 IIFE 中维护数组的状态?
最佳答案
闭包内有一个私有(private)变量 selectedItems
,并且该对象上还有一个名为 selectedItems
的属性。这会造成困惑。 属性的初始值只是空数组。当选中或取消选中复选框时,selectedItems
会使用 =
重新分配;它不再引用您的原始数组。仅当相关数组发生变异时,引用才会保留(这不是一个值得依赖的好主意)。
您可以定义一个 getter 函数来返回对数组的当前引用:
var jsgridCheckBox = (function(){
var selectedItems = [];
var selectItem = function(item) {
selectedItems.push(item);
};
var unselectItem = function(item) {
selectedItems = $.grep(selectedItems, function(i) {
return i !== item;
});
};
var selectAllCheckBox = function(item) {
selectedItems = [];
if(this.checked) {
}
};
return{
getSelectedItems : () => selectedItems,
selectItem : selectItem,
unselectItem : unselectItem,
selectAllCheckBox :selectAllCheckBox
}
})();
或者您始终可以将数组作为对象的属性引用,而不是作为独立变量:
var jsgridCheckBox = (function(){
var selectItem = function(item) {
this.selectedItems.push(item);
};
var unselectItem = function(item) {
this.selectedItems = $.grep(this.selectedItems, function(i) {
return i !== item;
});
};
var selectAllCheckBox = function(item) {
this.selectedItems = [];
if(this.checked) {
}
};
return{
selectedItems : [],
selectItem : selectItem,
unselectItem : unselectItem,
selectAllCheckBox :selectAllCheckBox
}
})();
关于javascript - IIFE 中的空数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50056309/