Auto Page Titles

Auto Page Titles

Hi,

I started developing an application using jqt (jQuery Touch), but I needed to move over to jqm (jQuery Mobile) due to the fact that I am writing the app for PhoneGap to compile into various platforms which jqt didnt support so well. In particular the tap instead of click functions

While using jqt I stumbled upon an extension written for it that allows for auto titles on some pages, and i used to this to build my applications main components which reads in an rss feed for a few sections, builds the section listing page and the article view page all with very little code which was re-usable for all feeds. Here is the code in jqt called autoTitles and autoBody:
  1.         $.jQTouch.addExtension(function AutoTitles(jQT){
                var titleSelector='.toolbar h1';
                $(function(){
                    $('body').bind('pageAnimationStart', function(e, data){
                        if (data.direction === 'in'){
                            var $title = $(titleSelector, $(e.target));
                            var $ref = $(e.target).data('referrer');
                            alert($(e.target).data('referrer').text());
                            if ($title.length && $ref){
                                $title.html($ref.text());
                            }
                        }
                    });
                });
                function setTitleSelector(ts){
                    titleSelector=ts;
                }
                return {
                    setTitleSelector: setTitleSelector
                }
            });
            $.jQTouch.addExtension(function AutoBody(jQT){
                var titleSelector='.info';
                $(function(){
                    $('body').bind('pageAnimationStart', function(e, data){
                        if (data.direction === 'in'){
                            var $title = $(titleSelector, $(e.target));
                            var $ref = $(e.target).data('referrer');
                            if ($title.length && $ref){
                                var refId = $('#art-'+$ref.attr('id'));
                                $title.html('<h2>'+$ref.text()+'</h2>');
                                $title.append(refId.text());
                            }
                        }
                    });
                });
                function setTitleSelector(ts){
                    titleSelector=ts;
                }
                return {
                    setTitleSelector: setTitleSelector
                }
            });










































Here is the code from the index.html file:
  1.     <body onload="onBodyLoad()">
            <div id="home">
                <div class="toolbar">
                    <h1>RSS reader</h1>
                </div>
                <ul class="rounded">
                    <li class="arrow"><a href="#news" id="feed1">Feed1</a></li>
                    <li class="arrow"><a href="#news" id="feed2">Feed2</a></li>
                    <li class="arrow"><a href="#news" id="feed3">Feed3</a></li>
                </ul>
            </div>
            <div id="news">
                <div class="toolbar">
                    <a href="#home" class="back">Home</a>
                    <h1>[Section Title]</h1>
                </div>
                <ul class="edgetoedge" id="result">
                </ul>
            </div>
            <div id="article">
                <div class="toolbar">
                    <a href="#" class="back">back</a>
                    <h1>[Article Title]</h1>
                </div>
                <div class="info">
                    [Article Body]
                </div>
            </div>
        </body>




























And the accompanying JS that got triggered when a feed was clicked:
  1.         $(function() {
                $('a[href="#news"]').click(function() {
               
                    // Setup array of feeds to fetch
                    var arr = [];
                    arr['feed1'] = 'http://www.domain.com/feed1';
                    arr['feed2'] = 'http://www.domain.com/feed2';
                    arr['feed3'] = 'http://www.domain.com/feed3';
                   
                    // Figure out which feed to fetch
                    var selId = $(this).attr('id');
                    var urlToLoad = arr[selId];
                   
                    // Put in loading icon
                    $('#result').html('<div align="center"><img src="css/jqt/img/loading.gif"></div>');
                   
                    // Get the feed
                    $.getFeed({
                        url: urlToLoad,
                        success: function(feed) {
                            var html = '';
                            var i = 0;
                            $(feed.items).each(function(){
                                i++ ;
                                var $item = $(this);

                                html += '<li><a href="#article" id="'+i+'">' +
                                    $item.attr("title") +
                                        '</a>' +
                                        '<span id="art-'+i+'" style="display:none">'+$item.attr("description")+'</span>'+
                                        '</li>';
                            });
                            $('#result').html(html);
                        }
                    });           
                });
            });



































Now I want to try replicate the same functionality using jqm, but am having absolutely no luck and googling this is proving to be insanley hard. Any idea how I could achieve something like this in jqm. As mentioned I cant use PHP or anything like that, and I dont want to load up all the feeds into the application on load as it could be HUGE when the amount of feeds increases or if feeds have 100's of items.

Any ideas? I would be forever happy and would probably end up worshiping the ground you walk on.

Thanks
Ian