#knockthrough.js

A simple debugging tool for knockoutjs. I'm adding features as I debug various Single Page Apps I'm building.

Tweet me with issues: @jonkragh

Features:

Binding Debugging
catch and display binding errors
highlights the element with the binding error
shows the binding error message
shows a datacontext dump for the element
Debug Hidden Element Issues
checkbox to display elements hidden by the "visible" binding
shows the binding that hid the element
shows a datacontext dump for the element
View Model Dump / Visibility
select your active view model in the knockthrough toolbar
does a json dump of the view models state
supports multiple view models per page
Observable Change Log
Logs all observable property changes
Typescript & Javascript Version

Test it out here (click on the red boxes to see the broken bindings).

##Screenshots

##Binding Debugging

Observable Property Change Log

Model Dumps

##Usage

Reference the js and css files:
- knockthrough.js
- knockthrough.css
Initialize knockthrough before you call ko.applyBindings

##Dependencies

Knockout JS
jQuery

// sample view model
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    this.fullName = ko.computed(function () {
        return this.firstName() + " " + this.lastName();
    }, this);
}

// initializing knockthrough.js
$(function () {
    var opts = new knockthrough.monitorOptions();
    // pass an instance of knockout
    opts.ko = ko;
    // kickoff the monitor before ko.applyBindings
    var monitor = new knockthrough.monitor(opts);
    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
});

JonKragh/knockthrough

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages