AmplifyJS and tbd

by slace

HTML

<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.css">
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="https://github.com/appendto/amplify/raw/master/core/amplify.core.js"></script>
<script src="https://github.com/appendto/amplify/raw/master/request/amplify.request.js"></script>
<script src="https://github.com/appendto/amplify/raw/master/store/amplify.store.js"></script>
<script src="https://raw.github.com/aaronpowell/tbd/master/lib/tbd.js"></script>
<div data-role="page" id="hackerNews">
    
    <div data-role="header">
        <a id="btnRefresh" href="#" data-icon="refresh">Refresh</a>
        <h1>Hacker News &nbsp;<span id="itemCount" class="count ui-btn-up-c ui-btn-corner-all">0</span></h1>
    </div>
    
    <div id="content" data-role="content">
        <ol class="newsList" data-role="listview"></ol>
    </div>
   
</div>

<script id="newsItem" type="text/x-jquery-tmpl">
    <li class="newsItem">
        <h3><a href="${url}">${title}</a></h3>
        <p class="subItem"><strong>${postedAgo} by ${postedBy} </strong></p>
        <div class="ui-li-aside">
            <p><strong>${points} points</strong></p>
            <p>${commentCount} comments</p>
        </div>
    </li>
</script>

CSS

.count {
    position: absolute;
    font-size: 11px;
    font-weight: bold;
    padding: .2em .5em;
    top: 50%;
    margin-top: -1em;
}

.ui-li-aside {
    float: right;
    width: 50%;
    text-align: right;
    margin: 1.4em 0px 0px 0px !important;
    position: absolute;
    right: 25px; 
}

.ui-li-heading, .ui-li-desc {
    width: 90%;
    text-overflow: ellipsis;
}

strong { font-style: bold; }

JavaScript

var hackerNews = (function( $, undefined ) {
    var pub = {};

    pub.init = function() {
        //Refresh news when btnRefresh is clicked
        $( "#btnRefresh" ).live( "click", function() {
            pub.getAndDisplayNews();
        });
        
        //When news updated, display items in list
        amplify.subscribe( "news.updated", function( news ) {
            displayNews( news );
        });

        //When news updated, then set item count
        amplify.subscribe( "news.updated", function( news ) {
            displayItemCount( news.items.length );
        });    

        //Define getNews AJAX JSONP request in Amplify Request
        amplify.request.define( "getNews", "ajax", {
            url: "http://api.ihackernews.com/page?format=jsonp", 
            dataType: "jsonp",
            jsonpCallback: "getNews",
            cache: 3000
        });  
    };
    
    pub.getAndDisplayNews = function() {
        //Starting loading animation
        $.mobile.pageLoading();  
        
        //Get news and add success callback using then
        getNews( function( data ) {
            //Publish that news that been updated & allow
            //the 2 subscribers to update the UI content
            amplify.publish( "news.updated", data );            
            //Stop loading animation on success
            $.mobile.pageLoading( true ); 
        });
    };
    
    function getNews( callback ) {
        amplify.request({
            resourceId: "getNews",
            success: function( data ) {
                if ( callback ) callback ( data );
            },
            error: function( message, level ) {
                console.log( level + ": " + message );
            }
        });        
    }
    
    function displayNews( news ) {
        var newsList = $( "#hackerNews" ).find( ".newsList" );
        
        //Empty current list
        newsList.empty();
        
        //Use template to create items & add to list
        $( "#newsItem"...