KoLite contains a set of helpers to aid in creating MVVM applications using JavaScript and Knockout. Including:
- asyncCommand
- command
- activity
- dirtyFlag
Current Version is 1.1.0
See this post for more details on KoLite: http://www.johnpapa.net/kolite1-1
-
Command binding handler supports binding to native Knockout bindings as well as the Knockout event binding for DOM events.
-
Event object get passed on to callback on event bindings, to determine pressed key or keypress event.
-
Added ko.command as an alternative to ko.asyncCommand for synchronous tasks.
-
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.
-
Explicitly do not execute commands when canExecute returns falsy. This is needed for DOM elements like the
<a>
which cannot be disabled. -
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/
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() } })
<button data-bind="command: onClickCommand">click handler test</button>
<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>
<button data-bind="activity: saveCommand.isExecuting, command: saveCommand">Save</button>
// 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()
>= jQuery 1.4.4
>= KnockoutJS 2.0.0
Hans Fjällemark
John Papa
Inspired by http://KnockoutJS.com
Copyright © 2012 Hans Fjällemark & John Papa.
KoLite is under MIT license - http://www.opensource.org/licenses/mit-license.php