Knockout - asyncCommand - Hans

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://github.com/andrewplummer/Sugar/raw/master/release/1.2.4/development/sugar-1.2.4.development.js"></script>
<script src="http://jquery-jsonp.googlecode.com/files/jquery.jsonp-2.3.0.min.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="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>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/css/bootstrap.js"></script>
<!DOCTYPE html>
<html>
     <body>
        <h1>TweetOut</h1>
        
        <p>
            <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: loadTweetsCommand.isExecuting,
                                command: loadTweetsCommand">
                                Load Tweets
                        </button>
                    </div>
                </div>
            </form>
        </p>
         
        <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;
}

JavaScript

my = {}

my.TwitterService = function() {
    var me = this,
        twitterUrl = 'https://twitter.com/status/user_timeline/{name}.json?count={count}&callback=?'        
    
    me.getTweets = function(options) {
        $.jsonp({
            complete: options.complete,
            error: options.error,
            success: options.success,
            url: twitterUrl.assign(options)
        })    
    }
}

my.TweetsViewModel = function() {
    var me = this,
        service = new my.TwitterService()
    
    me.name = ko.observable('hfjallemark')
    me.tweets = ko.observableArray()
    
    me.loadTweetsCommand = ko.asyncCommand({
        execute: function(complete) {        
            service.getTweets({
                complete: complete,
                count: 5,
                name: me.name(),
        
                success: function(result) {
                    me.tweets(result)
                    toastr.info(result.length + ' tweets loaded')
                },
        
                error: function(options, status) {
                    toastr.error('An error occured while loading tweets')
                }
            })    
        },
                
        canExecute: function(isExecuting) {
            return !isExecuting && me.name()
        }
    })
}
    
ko.applyBindings(new my.TweetsViewModel())