Amplify - Knockout

by johnpapa

HTML

<script src="https://raw.github.com/appendto/amplify/master/core/amplify.core.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/store/amplify.store.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/request/amplify.request.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="https://raw.github.com/mennovanslooten/mockJSON/master/js/jquery.mockjson.js"></script>
<script src="https://raw.github.com/timrwood/moment/1.5.0/min/moment.min.js"></script>
<script src="http://knockoutjs.com/js/knockout-2.0.0.js"></script>
    <form class="form-horizontal">
        <div class="control-group">
            <label for="userName" class="control-label">User name</label>
            <div class="controls">
                <div class="input-prepend input-append">
                    <span class="add-on">@</span><input id="userName" class="input-medium" placeholder="Twitter Name Here …" data-bind="value:userName, hasfocus:true"/><button class="btn"><i class="icon-remove icon-input-append-btn" data-bind="click:clearSearch"></i></button><button 
                    type="submit"
                    class="btn btn-primary" 
                    id="getButton"
                    data-bind="click:getTweets">Go!</button>
                </div>
            </div>
        </div>
    </form>

    <div data-bind="alertDialog: dialog" class="dialog"></div>
       
    <div class="hide" data-bind="css: { show: tweets().length }">
        <div>
            <h4 class="caption">Tweets</h4>
            <a class="btn btn-danger" data-bind="click:clearTweets"><i class="icon-trash icon-white"></i>Clear</a>
        </div>
        <br/>
        <div data-bind="foreach:tweets" class="twitter-group">
            <div class="twitter-item">
                <div>
                    <img...

CSS

body {  margin: 30px; }

.dialog {
    width: 550px;
}
.icon-input-append-btn {
    height:16px;
    margin-top: 2px;
}

.json-container{
    margin-top: 20px;
    width: 600px;
}

.twitter-item{
    color:#444;
    font-size:12px;
    min-height: 51px;
    padding: 12px 12px 12px 12px;
    border: 1px solid #E8E8E8;
    background-color:#F9F9F9;
}
.twitter-group {
    /*margin: 20px 8px 8px 8px;*/
    width: 600px;    
 }
.twitter-group > div:first-child
{ 
    -moz-border-radius-topright: 15px;
    -moz-border-radius-topleft: 15px;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.twitter-group > div:last-child
{ 
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

/*.twitter_container a{
    color:#0066CC;
    font-weight:bold;
}
*/
.twitter-status{
    height:60px;
    padding:6px;
    border-bottom:solid 1px #DEDEDE;
}
.twitter-image{
    float:left;
    margin-right:14px;
    border:solid 2px #DEDEDE;
    width:50px;
    height:50px;
}
.twitter-posted-at{
    font-size:11px;
    padding-top:4px;
    color:#999;
}

JavaScript

var my = my || {};

my.dialog = function () {
    var dlg = ko.observable()
        dlg.text = ko.observable()
        dlg.title = ko.observable()
        dlg.visible = ko.observable(false)
        dlg.close = function () {
            dlg.visible(false)
        }
        return dlg
}

my.dialog = function () {
    var dlg = ko.observable()
        dlg.text = ko.observable()
        dlg.title = ko.observable()
        dlg.visible = ko.observable(false)
        dlg.close = function () {
            dlg.visible(false)
        }
        return dlg
}

ko.bindingHandlers.alertDialog = {
    init: function (element, valueAccessor) {
        var self = this,
            dialog = valueAccessor(),
            $el = $(element),
            text = ko.utils.unwrapObservable(dialog.text),
            title = ko.utils.unwrapObservable(dialog.title),
            visible = ko.utils.unwrapObservable(dialog.visible)

        //data-dismiss="alert" 
        var $div = $('<div data-bind="visible:dialog.visible"></div>')
        $div.append('<a class="close" data-bind="click:dialog.close">x</a>')
            .append('<h4 class="alert-heading" data-bind="text:dialog.title"></h4>')
            .append('<p data-bind="text:dialog.text"></p>')
        $el.append($div)

        dialog.visible(false)
        $el.hide()
    },
    update: function (element, valueAccessor) {
        var self = this,
            $el = $(element),
            dialog = valueAccessor(),
            text = ko.utils.unwrapObservable(dialog.text),
            title = ko.utils.unwrapObservable(dialog.title),
            visible = ko.utils.unwrapObservable(dialog.visible),
            changeClass = function () {
                $el.removeClass("alert-info alert-error alert-success")
                switch (title) {
                    case "info":
                        $el.addClass("alert alert-info")
                        break
                    case "error":
                        $el.addClass("alert...