javascript - 追踪 knockout 事件

Question

我有一个基于 KnockoutJS 2.2.1 创建的 jQuery 网格插件。到目前为止它进展顺利，但是当插件在一个元素上初始化时，'computed' loadGrid 方法调用 3 次。

为了说明一点上下文，我包括了 loadGrid 方法和一些其他相关代码。 (实际的插件非常大，为了简洁起见，我只包含了插件的一部分)

function GridDataModel() {
    var self = this;

    self.gridState = {
        currentPage: ko.observable(opts.gridState.currentPage),
        pageSize: ko.observable(opts.gridState.pageSize),
        totalPages: ko.observable(opts.gridState.totalPages),
        orderBy: ko.observable(opts.gridState.orderBy),
    };
    self.loadGrid = ko.computed({
        read: function () {
            console.log('load grid');
            if (opts.dataUrl != '') {
                var requestData = self.gridState;
                if (self.columns.length == 0) requestData.needColumns = true;
                $.getJSON(opts.dataUrl, requestData, function (data, textStatus, jqXHR) {
                    self.loadData(data);
                });
            }
        },
        owner: this,
        deferEvaluation: false
    });
}

gridDataModel = new GridDataModel();

ko.applyBindings(gridDataModel);

请注意，此计算的唯一依赖项是 self.gridState，据我所知，它没有改变。

我需要确定导致初始化调用加载 3 次的原因。我知道 loadGrid 在定义时被调用 (b/c deferEvaluation == false)，但我需要找出导致其他两个事件触发的原因。

那么对于这个问题...有什么方法可以跟踪导致计算重新评估的事件？

另一方面，我设置了 deferEvaluation : true 但是当我发出

gridDataModel.gridState.currentPage.valueHasMutated()

计算不会触发。所以我什至可以让计算工作的唯一方法是如果 deferEvaluation == false。

Answer 1

“来源”选项卡上的 Chrome 开发人员工具可能会有所帮助。只需查看右侧的面板，即可在各种 DOM 元素上设置断点。

参见 this overview脚本面板(现在命名为“来源”面板)或 this overview of creating breakpoints on DOM events寻求更多帮助。