KoLite - asyncCommand Samples

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>
<script src="https://dl.dropbox.com/u/4355429/fiddle%20scripts/knockout.asyncCommand.js"></script>
<!DOCTYPE html>
<html>
     <body>
        <h1>KoLite - asyncCommand Samples</h1>
        
        <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>
            
            <h6>Using Knockout's 'click' Binding Handler</h6>
            <form class="form-horizontal">
                <div class="control-group">
                    <div class="input-prepend input-append">
                        <span class="add-on">@</span><input
                            class="input-medium"
                            data-bind="value: name, valueUpdate: 'afterkeydown'"
                            type="text"/><button
                            class="btn btn-primary"
                            data-bind="
                                activity: loadTweetsCommand2.isExecuting,
                                command: loadTweetsCommand2">
                                click handler test
                        </button>
                    </div>
                </div>
    ...

SCSS

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

JavaScript

// By: Hans Fjällemark and John Papa
// https://github.com/CodeSeven/KoLite


my = {}

my.TwitterService = function() {
    var
        getTweets = function(options) {
            var url = 'https://twitter.com/status/user_timeline/' + options.name + '.json?count=' + options.count + '&callback=?';
            $.jsonp({
                complete: options.always,
                error: options.fail,
                success: options.done,
                url: url
            })
        };
    return {
        getTweets: getTweets
    }
}

my.TweetsViewModel = function() {
    var
    service = new my.TwitterService(),

        name = ko.observable('hfjallemark'),
        tweets = ko.observableArray(),

        getTweets = function(complete) {
            service.getTweets({
                always: complete,
                count: 5,
                name: name(),

                done: function(result) {
                    tweets(result)
                    toastr.info(result.length + ' tweets loaded')
                },

                fail: function(options, status) {
                    toastr.error('An error occured while loading tweets')
                }
            });
        },

        loadTweetsCommand1 = ko.asyncCommand({
            execute: function(complete) {
                getTweets(complete);
            },

            canExecute: function(isExecuting) {
                return !isExecuting && name()
            }
        }),
                
        loadTweetsCommand2 = ko.asyncCommand({
            execute: function(complete) {
                getTweets(complete);
            },

            canExecute: function(isExecuting) {
                return !isExecuting && name()
            }
        }),
                
        loadTweetsCommand3 = ko.asyncCommand({
            execute: function(complete) {
                getTweets(complete);
            },

            canExecute: function(isExecuting) {
                return !isExecuting &&...