jQuery Mobile从Listview创建页面

Question

使用下面的代码，我将如何创建一个新的动态页面，以用于显示有关电影的更多详细信息？ 我想象它使用一个$ .mobile.changePage引用的onclick事件处理程序。

// 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

为列表中的锚添加委托的单击处理程序。 单击时，创建页面标记，将其附加到正文，然后在页面容器小部件上调用change：

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" } );
 });

演示

更新：

与其为每个电影创建一个新页面，不如拥有一个详细信息页面并为每个被单击的电影更新其内容，这是更好的选择。 在您的标记中添加第二页并更改点击处理程序：

<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" } );
 }); 

更新了演示

至于获取电影详细信息的内容，您将需要在列表视图中唯一标识电影的内容（ID，标题等）。 然后单击，使用此唯一标识符获取详细信息，并将其放入第二页内容中。

Answer 2

有没有更简单的方法？ 在我看来，这有点复杂。 我一直在寻找这样的东西： http : //jsfiddle.net/Gajotres/8uac7/，但是使用上面的代码。 谢谢

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