绑定到类外部按钮的公共属性与实例化对象时内部绑定的按钮的值不同

总的来说，我有一个跟踪所选复选框ID的对象。它这样做的方式是将 ID 推入/切入/切出数组，$Grid.selectedRows .此对象还将"刷新"方法绑定到刷新按钮。我有一个类，我从中创建该对象，KendoGridSelection .

我的问题是类内部绑定的按钮显示正确的数组值，而类外部绑定的具有 public selectedRows 属性的按钮在单击refresh按钮后不再更新。

出于测试目的，我有两个seeSelectedRowsArray按钮：

1. seeSelectedRowsArray按钮(内部绑定(
2. seeSelectedRowsArray2按钮(在类外绑定(

我正在Chrome版本28.0.1500.95 m中进行测试

这是我的代码：

.JS

var KendoGridSelection = function (gridID, pagerSelector) {
    var $Grid = this;
    $Grid.selectedRows = [];
    $Grid.gridID = gridID;
    $Grid.pagerSelector = pagerSelector;
    $Grid.grid = $($Grid.gridID).data('kendoGrid');
    $Grid.pager = $($Grid.pagerSelector).data('kendoPager');
    $Grid.gridCheckboxes = $('input[type=checkbox]', $Grid.gridID);
    $Grid.gridRows = $('table tbody tr', $Grid.gridID);
    $Grid.refreshButton = $('.refreshButton', $Grid.gridID);
    $Grid.bindUIEvents = function () {
        $Grid.gridCheckboxes = $('input[type=checkbox]', $Grid.gridID);
        $Grid.gridRows = $('.row', $Grid.gridID);
        // Row click event
        /*$($Grid.gridRows).click(function (e) {
            if (!$(e.target).parent().hasClass('k-hierarchy-cell')) $(this).find('input[type=checkbox]').click();
        });*/
        // Checkbock click event
        $($Grid.gridCheckboxes).click(function (e) {
            console.log('checkbox clicked!');
            e.stopPropagation();
            var $t = $(this);
            var checkboxID = $t.attr('id');
            var thisRow = $t.closest('tr');
            if ($t.is(':checked')) {
                thisRow.addClass('k-state-selected');
                // add to selected[]
                if ($.inArray(checkboxID, $Grid.selectedRows) === -1) $Grid.selectedRows.push(checkboxID);
            } else {
                thisRow.removeClass('k-state-selected');
                // remove from selected[]
                $Grid.selectedRows.splice($.inArray(checkboxID, $Grid.selectedRows), 1);
            }
        });
    }
    $Grid.gridPersistSelected = function () {
        $.each($Grid.selectedRows, function () {
            var $t = $('#' + this);
            if ($t) $t.click();
        });
    }
    $Grid.pagerChange = function () {
        $Grid.bindUIEvents();
        $Grid.gridPersistSelected();
    }
    $Grid.refresh = function () {
        $Grid.selectedRows = [];
        $Grid.gridCheckboxes.attr('checked', false);
        console.log('Refresh clicked.');
        console.log('$Grid.selectedRows: '+$Grid.selectedRows);
    }
    // Init
    $Grid.pagerChange();
    // $Grid.pager.bind("change", $Grid.pagerChange);
    // Unbind refresh button, then rebind
    // Refresh button
    $Grid.refreshButton.click(function(){
        console.log('reset!'); 
        $Grid.refresh();
    });
    $('.seeSelectedRowsArray').click(function(){
        console.log($Grid.selectedRows);
    });
    return {
        selectedRows: $Grid.selectedRows,
        refresh: $Grid.refresh,
    }
}
$(function(){
    window.activeThreatsGrid = new KendoGridSelection('.grid', '.pager');
   $('.seeSelectedRowsArray2').click(function(){
        console.log(activeThreatsGrid.selectedRows);
    });
});

.HTML

<div class='grid'>
    <div class='row'>
        <label><input type="checkbox" id="item1"> </label>
    </div>
    <div class='row'>
        <label><input type="checkbox" id="item2"> </label>
    </div>
    <div class='row'>
        <label><input type="checkbox" id="item3"> </label>
    </div>
    <div class='row'>
        <label><input type="checkbox" id="item4"> </label>
    </div>
    <div class='row'>
        <label><input type="checkbox" id="item5"> </label>
    </div>
    <div class='pager'>
        <input type="button" value="refresh" class="refreshButton">
    </div>
        <div><input type="button" value="seeSelectedRowsArray" class="seeSelectedRowsArray"></div>
        <div><input type="button" value="seeSelectedRowsArray2" class="seeSelectedRowsArray2"></div>
</div>

.CSS

.row{background:blue; height:20px; width:100px; margin-bottom:5px;}

JSFiddle

演示

发生了什么事情：

• 当我单击多个复选框，然后单击seeSelectedRowsArray时，我在数组中得到正确的值。但是我可以多次执行此操作，并且仍然可以获得正确的值。
• 当我点击refresh按钮时，我的console.log告诉我我的selectedRows数组是空的。然后当我单击seeSelectedRowsArray时，数组为空(预期(。当我单击seeSelectedRowsArray2时，数组中仍然有值。

更新 1

我发现，如果我$Grid.selectedRows绑定到类中的按钮单击，它总是获得最新的值，即使在刷新后也是如此。如果我将公共selectedRows绑定到类外部的按钮单击，则在单击refresh按钮后，selectedRows不再更新并卡在刷新前的值。

为什么内部绑定的按钮显示正确的数组值，而使用 public selectedRows 属性绑定在类外部的按钮在单击refresh按钮后不再更新？

任何帮助将不胜感激！