js amplify rss fetch

example of how amplify.js grabs data from an rss feed and displays the data using a template.

by Terrance Smith

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>
<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 );
        });              
    };
    
    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 ) {
        var news = amplify.store( "news" ),
            thisTime = new Date().getTime();
        
        if ( !news || ( thisTime - news.timeStamp > 5000 ) ) {
            //Request for news from jQuery ajax
            lastTime = thisTime;
            console.log( "Getting new version" );
            $.ajax({
                url: "http://api.ihackernews.com/page?format=jsonp",
                dataType: "jsonp",
                success: function( data, textStatus, jqXHR ) {
                    data.timeStamp = thisTime;
                    amplify.store( "news", data );
                    callback && callback( data );
                },
                error: function( jqXHR, textStatus, errorThrown ) {
                    console.log( textStatus + ": " + errorThrown );
                }
            });
        } else {
       ...