KoLite - asyncCommand Samples

by johnpapa

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://jquery-jsonp.googlecode.com/files/jquery.jsonp-2.3.0.min.js"></script>
<script src="http://neteye.github.com/scripts/jquery.activity-indicator.min.js"></script>
<script src="https://dl.dropbox.com/u/3071586/KO/jquery.activity-ex.js"></script>
<script src="http://codeseven.github.com/toastr/toastr-min.js"></script>
<link rel="stylesheet" href="http://codeseven.github.com/toastr/toastr.css">
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://dl.dropbox.com/u/4355429/fiddle%20scripts/knockout.activity.js"></script>
<!DOCTYPE html>
<html>
     <body>
        <p>
            <h6>Using Knockout's 'change' Binding Handler</h6>
            
            <select data-bind="command: { change: loadTweetsCommand1 }">
                <option>change handler test - a</option>
                <option>change handler test - b</option>
            </select>

        </p>
         
        <h3>Results</h3>
        <ul data-bind="template: {
            afterAdd: function(domNode, index) { $(domNode).delay(50 * index).hide().fadeIn() },
            foreach: tweets }">
            <li data-bind="text: text"></li>
        </ul>
    </body>
</html>

SCSS

body {
    padding: 30px;
}
.label-info{
    padding: 8px;
    width: 90px;
}

JavaScript

// By: Hans Fjällemark and John Papa
// https://github.com/CodeSeven/KoLite
(function(ko) {
    ko.asyncCommand = function(options) {
        var
        self = ko.observable(),
            canExecuteDelegate = options.canExecute,
            executeDelegate = options.execute,

            completeCallback = function() {
                self.isExecuting(false);
            };

        self.isExecuting = ko.observable();

        self.canExecute = ko.computed(function() {
            return canExecuteDelegate ? canExecuteDelegate(self.isExecuting()) : true;
        });

        self.execute = function(argument) {
            var args = []; // Allow for this argument to be passed on to execute delegate
            if (executeDelegate.length === 2) {
                args.push(argument);
            }

            args.push(completeCallback);
            self.isExecuting(true);
            executeDelegate.apply(this, args);
        };
        return self;
    };
})(ko);

;
(function(ko) {
    ko.utils.wrapAccessor = function(accessor) {
        return function() {
            return accessor;
        };
    };

    ko.bindingHandlers.command = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = valueAccessor();
            var commands = value.execute ? {
                click: value
            } : value;


            for (var command in commands) {
                if (ko.bindingHandlers[command]) {
                    ko.bindingHandlers[command].init(
                    element, ko.utils.wrapAccessor(commands[command].execute), allBindingsAccessor, viewModel);
                } else {
                    var events = {};

                    for (var command in commands) {
                        events[command] = commands[command].execute;
                    }

                    ko.bindingHandlers.event.init(
                    element, ko.utils.wrapAccessor(events), allBindingsAccessor, viewModel);
    ...