More Fun with YQL & jQuery.GetJSON

by deanpeters

HTML

<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css">
<ul id="rssItems" data-role="listview" class="ui-listview">
</ul> 


<div id="cloneables" style="display:none;">
    
        <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c">
            <div class="ui-btn-inner ui-li">
                <div class="ui-btn-text">
                    <a href="#" class="ui-link-inherit">
                        <img src="" class="ui-li-thumb" />
                        <h3 class="ui-li-heading"></h3>
                        <p class="ui-li-desc">&nbsp;</p>                
                    </a>
                </div>
                <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
            </div>
        </li>

</div><!-- /#cloneables -->

<script type="text/javascript">
  var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-442503-9']);
    _gaq.push(['_setDomainName', 'deanpeters.com']);
    _gaq.push(['_setCampNameKey', 'jsfiddle']);    
    _gaq.push(['_setCampMediumKey', navigator.userAgent ]);
    _gaq.push(['_setCampSourceKey', 'internet']);   
    _gaq.push(['_setCampTermKey', 'javascript']);       
    _gaq.push(['_setCampContentKey', document.title ]);
    _gaq.push(['_trackPageview']);

     (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    
</script>

CSS

/* for thumbnail lists, reduce height since we're not showing description */
.ui-btn.ui-li-has-thumb > .ui-li > .ui-btn-text p { display: none; }
.ui-btn.ui-li-has-thumb > .ui-li > .ui-btn-text {
    max-height:60px;
}
.ui-btn.ui-li-has-thumb > .ui-li > .ui-btn-text img {
    margin-top:5px;
    max-height: 60px;
}

JavaScript

;(function($){
    if(!$.Feeds){
        $.Feeds = new Object();
    };
    
    // thanks again for the formatting jumpstart: http://starter.pixelgraphics.us/
    
    $.Feeds.RenderRss = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        
        // Add a reverse reference to the DOM object
        base.$el.data("Feeds.RenderRss", base);
        
        
        base.init = function(){
            
            // this is where options get merged
            base.options = $.extend({},$.Feeds.RenderRss.defaultOptions, options);        
            
            // Put your initialization code here
            console.log("base.options => ", base.options);

            base.renderStoryList();
        };
        
        // Sample Function, Uncomment to use
        // base.functionName = function(paramaters){
        // 
        // };    

        // consider http://stackoverflow.com/a/5402892    
        // and this .. http://stackoverflow.com/a/4874732            
        base.renderStoryList = function () {
            
            // wait until we have the data        
            $.when( $.getJSON( base.getYqlQuery()) ).then(function( data ){
                if(!data.query) {
                    console.error("error:", "bad query:", data.error.description);
                    return false;
                }
                items = data.query.results.item;  
                // console.log("success - items:", items);           
               
                
                // http://stackoverflow.com/a/122704
                // liBlock = $("#cloneables").children("li:first").clone();
                liBlock =  $.extend({}, $("#cloneables").children("li:first"))
                ulBlock = $(base.el).clone();
   ...