kohenkatz / kolite

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

KoLite

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.1.0

See this post for more details on KoLite: http://www.johnpapa.net/kolite1-1

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 which cannot be disabled.

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

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

##Super Quick Start You can check out this fiddle to see the asyncCommand, command and activity in action. http://jsfiddle.net/hfjallemark/zEKRb/

Quick Start

asyncCommand

demo: http://jsfiddle.net/hfjallemark/zEKRb/

<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 - 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>
</select>

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>

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()
})

// Resync Changes
dirtyFlag().reset()

// Force into dirty state
dirtyFlag().forceDirty()

Depends on

>= jQuery 1.4.4

>= KnockoutJS 2.0.0

Authors

Hans Fjällemark

• http://twitter.com/hfjallemark

John Papa

• http://twitter.com/John_Papa

Credits

Inspired by http://KnockoutJS.com

Copyright

Copyright © 2012 Hans Fjällemark & John Papa.

License

KoLite is under MIT license - http://www.opensource.org/licenses/mit-license.php