Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
96 lines (64 sloc) 3.37 KB


Build Status

A collection of KnockoutJS helpers, classes, and bindings that I have found useful during my development.


install uppercut using either nuget or bower.

Bower: bower install uppercut

Nuget: Install-Package uppercutjs


TrackableObservable & TrackableObservableArray

Observables that store a copy of the original value that can be reverted to. Very useful when writing edit forms where you want to have the ability to revert the edit. You may read the commitValue property if you want to display the "saved" value.

var form = function(){
    var self = this;
    self.value = ko.trackableObservable("initial commited value");
    self.array = ko.trackableObservableArray([]);
    self.cancel = function(){
        // reset the value back to the currently commited value
    }; = fucntion(){
        // commits the current working value
    return self;


AsObservable & AsObservableArray

Ensure a value is either and observable or and observableArray. Helpful when you are writing components where the consumer may not care able observablitity.

    var observable = ko.asObservable(options.value);
    var observableArray = ko.asObservableArray(options.array);



This binding with write the input value out using a simple console.log this can be very helpful debuging if you are unsure of the current context.

<!-- ko console: someValue --> <!-- /ko -->

any & empty

The any and empty bindings use the length property to determine if there are items or not. It will work but both regular and observable arrays or any object that matches the array signiture.

<div data-bind="any: items"> You have Items</div>
<div data-bind="empty: items"> You have No Items</div>


The href binding is just a shortcut for attr: { href: url }

<a data-bind="href: url">click here</a>

Contributing || Building from Source

Run npm install and bower install to pull down all the dependencies


We use grunt for all our build tasks grunt will run JSHint, Bundling, and Minification. grunt test will run all the jasmine tests and lastly grunt push prepares the bower package, see bellow for more on that.


grunt test runs the jasmine tests. All the tests can be found in the spec folder. We have one helper method prepareTestNode that will make sure a test DOM node is setup, cleaned, and set to a global variable for access.


**Make sure to update the version in package.json **

Because NuGet requires a specific folder structure and there is no OSX packager there is a separate repository for NuGet distribution that is manually updated.

grunt push will prepare a bower package check in and display instructions for completion of the distribution.

You can’t perform that action at this time.