Knockout - asyncCommand - Hans

by bmccord

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.TweetsViewModel = function() {
    var me = this

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

    me.loadTweetsCommand = ko.asyncCommand({
        execute: function(complete) {
            $.jsonp({
                complete: complete,
                error: function(options, status) {
                    toastr.error('An error occured while loading tweets')
                },
                success: function(result) {
                    me.tweets(result)
                    toastr.info(result.length + ' tweets loaded')
                },
                url: 'http://api.twitter.com/1/statuses/user_timeline/' + me.name() + '.json?count=10&include_rts=1&callback=?'
            })
        },

        canExecute: function(isExecuting) {
            return !isExecuting && me.name()
        }
    })
}

ko.applyBindings(new my.TweetsViewModel())