CODEWITHSUNDEEP
javascriptknockout.jsdom-eventsknockout-2.0
John Livermore
John Livermore

Reputation: 31343

Tracing knockout events

I have a jQuery grid plugin I am creating based on KnockoutJS 2.2.1. So far it is coming along well, but when the plugin is initialized on an element, the 'computed' loadGrid method invokes 3 times.

Just for a little context I am including the loadGrid method and some other related code. (The actual plugin is quite large so for brevity I only am including part of the plugin)

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);

Notice the only dependency this computed has is on self.gridState which isn't changing to my knowledge.

I need to determine what is causing the initialization to call the load 3 times. I know loadGrid gets called when defined (b/c deferEvaluation == false), but I need to find out what is causing the other two events to fire.

So for the question...What is a way to trace what event causes a computed to reevaluate?

On another note, I set deferEvaluation : true but when I issue

gridDataModel.gridState.currentPage.valueHasMutated()

The computed does not fire. So the only way I can even get the computed to work is if deferEvaluation == false.

Upvotes: 2

Views: 625

Answers (2)

TGarrett
TGarrett

Reputation: 552

I use the knockoutjs chrome plugin and I use messages for KO, that way you can display stuff to the console. Example of what I did in the past.

self.messages.push(response.msg);

Upvotes: 0

Dan Esparza
Dan Esparza

Reputation: 28385

Chrome developer tools on the 'Sources' tab might be able to help. Just check out the panels on the right that will let you set breakpoints on various DOM elements.

See this overview of the scripts panel (now named the 'Sources' panel) or this overview of creating breakpoints on DOM events for more help.

Upvotes: 0

Related Questions