Skip to content
KoLite contains a set of helpers to aid in creating MVVM applications using JavaScript and Knockout.


KoLite contains a set of helpers to aid in creating MVVM applications using JavaScript and Knockout. Including:

  1. asyncCommand
  2. command
  3. activity
  4. dirtyFlag

Current Version is 1.2.0

See this post for more details on KoLite:

Latest Changes

  1. Command binding handler supports binding to native Knockout bindings as well as the Knockout event binding for DOM events.

  2. Event object get passed on to callback on event bindings, to determine pressed key or keypress event.

  3. Added ko.command as an alternative to ko.asyncCommand for synchronous tasks.

  4. The asyncCommand's canExecute now defaults to !isExecuting if no canExecute delegate is specified. This eliminates the need of a canExecute delegate in you view-model when you only want disable the bound element when the command is executing.

  5. Explicitly do not execute commands when canExecute returns falsy. This is needed for DOM elements like the <a> which cannot be disabled.

  6. Renamed file knockout.asyncCommand.js to knockout.command.js as it now contains both async and sync commands.


Also available on NuGet at

Super Quick Start

You can check out this fiddle to see the asyncCommand, command and activity in action.

Quick Start



<button data-bind="command: saveCommand">Save</button>
self.saveCommand = ko.asyncCommand({
    execute: function(callback) {
            complete: callback,
            data: { name: },
            type: 'POST',
            url: '/save/',
            success: function(result) {
                alert('Name saved:' + result)
    canExecute: function(isExecuting) {
        return !isExecuting &&

asyncCommand - Knockout's 'click' binding handler (the default)

<button data-bind="command: onClickCommand">click handler test</button>

asyncCommand - Knockout's 'change' binding handler (or any Knockout binding handler)

<select data-bind="command: { change: onChangeCommand }">
    <option>change handler test - a</option>
    <option>change handler test - b</option>

asyncCommand - Knockout's 'event' binding handler (documentation here)

<div data-bind="command: { mouseover: tooltipCommand }">Information</div>

asyncCommand and activity

<button data-bind="activity: saveCommand.isExecuting, command: saveCommand">Save</button>


// Your model
var Person = function () {
    var self = this; = ko.observable();
    self.firstName = ko.observable().extend({ required: true });
    self.lastName = ko.observable().extend({ required: true });
    self.dirtyFlag = new ko.DirtyFlag([self.firstName, self.lastName]);

    return self;

Hook these into your viewmodel ...

// Property on your view model. myPerson is an instance of Person.
// Did it Change?
isDirty = ko.computed(function () {
    return myPerson().dirtyFlag().isDirty()
// Resync Changes
// Force into dirty state

Depends on

>= jQuery 1.4.4

>= KnockoutJS 2.0.0


Hans Fjällemark

John Papa


Inspired by


Copyright © 2012 Hans Fjällemark & John Papa.


KoLite is under MIT license -

Something went wrong with that request. Please try again.