追踪淘汰赛事件

Posted 2023-05-07

【中文标题】追踪淘汰赛事件

【英文标题】：Tracing knockout events

【发布时间】：2013-01-31 21:47:31

【问题描述】：

我有一个基于 KnockoutJS 2.2.1 创建的 jQuery 网格插件。到目前为止它进展顺利，但是当插件在一个元素上初始化时，“计算”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。

【问题讨论】：

loadGrid 有四个依赖项：currentPage、pageSize、totalPages 和 orderBy。对其中任何一项的更改都会导致 loadGrid 更新。

【参考方案1】：

“来源”标签上的 Chrome 开发者工具可能会有所帮助。只需查看右侧的面板，这些面板可让您在各种 DOM 元素上设置断点。

请参阅脚本面板（现称为“源”面板）的this overview 或this overview of creating breakpoints on DOM events 以获得更多帮助。

【参考方案2】：

我使用 knockoutjs chrome 插件并使用 KO 消息，这样您就可以将内容显示到控制台。我过去所做的示例。

self.messages.push(response.msg);