将 jqGrid 行按钮绑定到 Knockout JS 时超出了最大调用堆栈大小

Question

我有一个 jqGrid，每行有 edit 和 delete 按钮，它在单击按钮时加载数据。这些 (Edit & Del) 按钮与 Knockout ViewModel 绑定。一切正常，但第二次单击加载 jqGrid 的 button 时，数据未加载，我得到：

Maximum call stack size

型号:

function policyModel() {
var self = this;
self.iID = ko.observable();
//other properties...
}

其ViewModel:

function policyViewModel () {

  var self = this;

  self.model = new policyModel();

  self.getPolicies = function () {

    $.jgrid.gridUnload("#tblPolicies"); //if user clicks the view button more than once, it should be unloaded first
    getPolicies();
  }

  self.getPolicy = function() {

    //I want to get the details of row using AJAX call and update model here
    alert('Get: ' + rowID); 
  }

  self.updatePolicy = function () {

    var strPolicy = ko.toJSON(self.model);
    alert(strPolicy); //Send the updated record to server using AJAX call
  }

  self.deletePolicy = function (rowID) {
    alert("Delete: " + rowID); //Delete the clicked row using AJAX call
  }

  //some subscribe functions of observables below this...
}

填充 jqGrid:

function getPolicies() {

$("#tblPolicies").jqGrid({

    url: apiUrl,
    datatype: "json",
    loadonce: true,
    colModel: [
        //Column models for data here....

        //this is where I'm generating row buttons and binging them to Knockout model
        {
            label: 'Del', name: 'delete',
            formatter: function (cellvalue, options, rowObject) {

                return '<span class="fa fa-trash"  data-bind="click: deletePolicy.bind($data, ' + options.rowId + ')"></span>'
            },
        },
        {
            label: 'Edit', name: 'edit',
            formatter: function (cellvalue, options, rowObject) {

                return '<span class="fa fa-pencil" data-bind="click: getPolicy.bind($data, ' + options.rowId + ')"></span>'
            }
        },
    ],
    rowNum: 10,
    rowList: [10, 20, 50, 100],
    loadonce: true,
    pager: "#dvPoliciesPager",
    loadComplete: function () {

       /*
       As jqGrid is generated after binding of Knockout, I'm binding it to container table in 'loadComplete' event.
       To avoid rebinding, I'm removing the bindings first using 'cleanNode'.
       */
       ko.cleanNode(document.getElementById("tblPolicies"));
       ko.applyBindings(policyViewModel(), document.getElementById("tblPolicies"));
    },
 });
}

正在初始化 document.ready:

$(function () {

  ko.applyBindings(new policyViewModel());
});

和HTML:

<input type="button" id="btnUpdatePolicy" data-bind="click: updatePolicy" value="Update Policy"/>

<input type="button" id="btnViewPolicies" data-bind="click: getPolicies" value="View Policies"/>

<div id="dvPoliciesContainer">
  <table id="tblPolicies"></table>
</div>

我试过： This, This and This 但无法获得任何帮助。

Answer 1

我猜这是在循环中调用同一个函数：

  self.getPolicies = function () {

    $.jgrid.gridUnload("#tblPolicies"); //if user clicks the view button more than once,
    window.getPolicies(); // <---------this one here
  }

我想你想引用全局定义的 jqGrid creator 函数。

将 jqGrid 行按钮绑定到 Knockout JS 时超出了最大调用堆栈大小

Maximum call stack size exceeded while binding jqGrid row buttons to Knockout JS

javascript

jquery

jqgrid

knockout.js