пустой массив в IIFE - PullRequest
Новая
       4

пустой массив в IIFE

0 голосов
/ 27 апреля 2018

Я пытаюсь добавить флажок в заголовке для выбора всех строк в jsgrid, как показано здесь . Работает нормально. Но вместо того, чтобы поместить весь код на одной странице, я попытался поместить эти функции в 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?

1 Ответ

0 голосов
/ 27 апреля 2018

У вас есть закрытая переменная внутри замыкания, 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 
  }
})();
...