kolite's Introduction

KoLite

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

asyncCommand
activity
dirtyFlag

Current Version

1.0.3

##NuGet Also available on NuGet at https://nuget.org/packages/KoLite

Quick start

asyncCommand

demo: http://jsfiddle.net/johnpapa/FhLvf/

<button data-bind="command: saveCommand">Save</button>

self.saveCommand = ko.asyncCommand({
    execute: function(callback) {
        $.ajax({
            complete: callback,
            data: { name: self.name() },
            type: 'POST',
            url: '/save/',
                    
            success: function(result) {
                alert('Name saved:' + result)
            }
        })
    },
        
    canExecute: function(isExecuting) {
        return !isExecuting && self.name()
    }
})

asyncCommand - event other than click

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

asyncCommand and activity

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

dirtyFlag

// Your model
var Person = function () {
	var self = this;
	self.id = 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();
}),