CODEWITHSUNDEEP
debuggingknockout.js
Jürgen Thelen
Jürgen Thelen

Reputation: 12727

How to find out where (in which .js file) a knockout observable is being created initially?

The following .html snippet retrieves the value of a ko observable named title:

<th data-bind="text: title"></th>

Only knowing the .html file, is there a way to systematically find out (backtrace?), where - in which .js file of the project - this specific title observable is being created initially?

If so, how can this be achieved?

Knockout 3.4.2

Upvotes: 0

Views: 231

Answers (1)

Philip Bijker
Philip Bijker

Reputation: 5115

Assuming you can run the project, you could try the following steps (example uses Chrome browser):

  1. Find the dom element bound to the observable:

    • right click on element -> Inspect
    • in elements tab, right click element -> Copy -> copy selector

  2. Find some knockout context for this element to spot the viewmodel containing the observable

    • in console: ko.contextFor(document.querySelector('<paste element selector>'))
    • browse $data (currently bound viewmodel) or any of the $parents (in case of foreach-es...) to find the viemodel name containing the observable
    • copy the name of the viewmodel

  3. Find the javascript file containing the viewmodel:

    • in dev-tools hit CTRL-SHIFT-F
    • paste viemodel name

In the results window, you'll find all files containing this viewmodel name (and the declaration of the observable).

Upvotes: 1

Related Questions