Question

function initGrids() {
    for (var i = 0; i < grids.length; i++) {

        $('#' + grids[i].gridName).kendoGrid({
            columns: [{
                width: 50, "template": "<input type=\"checkbox\" />"
            },
            {
                field: "Name",
                title: "Name"
            }],
            dataBound: function () {
                noRecords(grids[i].gridName);
            }
        }).css('width', '100%');
    }
}

我有这个功能，我初始化多个kendo ui网格。网格具有数据绑定和transport.read等功能，可以随时调用。

这意味着在完成for循环后会调用像dataBound这样的函数。这也意味着增量变量var i;将在grids.length + 1，所以当调用dataBound函数，其中包含这段代码noRecords(grids[i].gridName)时，网格[i]将是错误的索引！

解决的一种方法是逐个手动定义网格，但我有三个网格具有完全相同的列等。但是代码看起来很糟糕，因为我正在重复这些事情。

我该如何解决这个问题？

Answer 1

你必须在这里使用closure来捕获具有循环特定值的

// ...
dataBound: (function (index) {
    return function(){
        noRecords(grids[index].gridName);
    }
})(i)
// ...

Answer 2

使用单独的函数或使用闭包

封闭

for (var i = 0; i < grids.length; i++) {
    (function(index){
       $('#' + grids[index].gridName).kendoGrid({
           columns: [{
               width: 50, "template": "<input type=\"checkbox\" />"
           },
           {
               field: "Name",
               title: "Name"
           }],
           dataBound: function () {
               noRecords(grids[index].gridName);
           }
       }).css('width', '100%');
    })(i);
}

或功能

function initGrid(grid){
    $('#' + grid.gridName).kendoGrid({
        columns: [{
            width: 50, "template": "<input type=\"checkbox\" />"
        },
        {
            field: "Name",
            title: "Name"
        }],
        dataBound: function () {
            noRecords(grid.gridName);
        }
    }).css('width', '100%');
}

for (var i = 0; i < grids.length; i++) {
   initGrid(grids[i]);
}

循环中的函数在循环完成后调用

2 个答案: