jQuery Mobile从Listview创建页面

Question

Using the code below how would i create a new dynamic page that can be used to show further detailed information about a film? i imagine it uses a onclick event handler with a reference to $.mobile.changePage.

// JAVASCRIPT

$(document).on('pagebeforeshow', '#moviefilm', function(){
           var apikey = "MYAPIKEY";
           var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

           // construct the uri with apikey
           var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apikey + '&limit=5' + '&country=us';

           $(document).ready(function() {

                             // send off the query
                             $.ajax({
                                    url: moviesSearchUrl,
                                    dataType: "jsonp",
                                    success: searchCallback
                                    });
                             });

           // callback for when we get back the results
           function searchCallback(data) {
           $(document.body).append('Found ' + data.total + ' results for Top Box Office Earning Movie');
           var movies = data.movies;
           $.each(movies, function (index, movie) {
                  $("#filmlist").append("<li><a><img src='" + movie.posters.thumbnail + "' /><h2>" + movie.title + "</h2>" + "<p>" + "Score: " + movie.ratings.critics_score + "%" + "</p></a></li>").listview().listview("refresh");
                  });
           }
           });


// HTML
         <div data-role="main" class="ui-content">
         <ul data-role="listview" id="filmlist"></ul>
         </div>

Answer 1

Add a delegated click handler for the anchors within the list. On click create the page markup, append it to the body, and call change on the page container widget:

var pIdx = 1;
$("#filmlist").on("click", "li a", function(){        
    var newpageid = 'page' + pIdx;
    pIdx++;
    var thetitle = $(this).find("h2").text();
    var phtml = '<div data-role="page" id="' + newpageid + '">';

    phtml += '<div data-role="header"><h1>' + thetitle + '</h1></div> ';
    phtml += '<div data-role="main" class="ui-content">';
    phtml += '</div></div>';
    $("body").append(phtml);

    $(":mobile-pagecontainer").pagecontainer( "change", "#" + newpageid, { transition: "slide" } );
 });

DEMO

UPDATE:

Instead of creating a new page for each movie, it is better to have one detail page and just update its contents for each movie that is clicked. Add a second page in your markup and change the click handler:

<div data-role="page" id="headline">
    <div data-theme="a" data-role="header">
        <a href="#moviefilm" class="ui-btn-left" data-transition="slide" data-direction="reverse">Back</a>                        
        <h3>
            Movie Details
        </h3>
    </div>        
    <div data-role="main" class="ui-content">
        <h3 id="theMovieTitle"></h3>
        <p>movie details go here</p>
    </div>
</div>   

$("#filmlist").on("click", "li a", function(){          
    var thetitle = $(this).find("h2").text();
    $("#theMovieTitle").text(thetitle);        
    $(":mobile-pagecontainer").pagecontainer( "change", "#headline", { transition: "slide" } );
 }); 

Updated DEMO

As for getting the movie details content, you will need something in the listview that uniquely identifies the movie (ID, title, etc.). Then on click, use this unique identifier to get the details and put them into the second page contents.

Answer 2

Is there a simpler way? That looks a little complex to me. I was looking for something like this: http://jsfiddle.net/Gajotres/8uac7/ but using my code above. Thanks

[1]: http://jsfiddle.net/Gajotres/8uac7/