Javascript JQuery Mobile从Listview创建页面

使用下面的代码，我将如何创建一个新的动态页面，用于显示有关电影的更多详细信息？我猜想它使用了一个onclick事件处理程序，并引用了$.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>

//JAVASCRIPT
$（文档）。在（'pagebeforeshow'，'#moviefilm'，函数（）上{
var apikey=“MYAPIKEY”；
var baseUrl=”http://api.rottentomatoes.com/api/public/v1.0";
//用apikey构造uri
var moviesSearchUrl=baseUrl+'/lists/movies/box_office.json？apikey='+apikey+'&limit=5'+'&country=us'；
$（文档）.ready（函数（）{
//发出询问
$.ajax({
url:moviesSearchUrl，
数据类型：“jsonp”，
成功：searchCallback
});
});
//返回结果时的回调
函数searchCallback（数据）{
$（document.body）.append（'Found'+data.total+'results for the Top票房收入电影'）；
var movies=data.movies；
$.each（电影，功能（索引，电影）{
$（“#电影列表”）。追加（“
”+movie.title+”+“+”“+”分数：“+movie.ratings.crities”+“%”+”
”）。listview（）。listview（“刷新”）；
});
}
});
//HTML

为列表中的锚添加委托点击处理程序。单击“创建页面标记”，将其附加到正文中，并调用页面容器小部件上的更改：

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

var-pIdx=1；
$（“#电影列表”）。在（“单击”，“LIA”，函数（）{
var newpageid='page'+pIdx；
pIdx++；
var thetitle=$（this.find（“h2”）.text（）；
var phtml=''；
phtml+=''+标题+''；
phtml+=''；
phtml+=''；
$（“正文”）。追加（phtml）；
$（“：mobile pagecontainer”）.pagecontainer（“更改”，“#”+newpageid，{transition:“幻灯片”}）；
});

更新：

与其为每部电影创建一个新页面，不如有一个详细信息页面，只更新单击的每部电影的内容。在标记中添加第二个页面并更改单击处理程序：

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

电影细节
电影详情请点击这里

$（“#电影列表”）。在（“单击”，“LIA”，函数（）{
var thetitle=$（this.find（“h2”）.text（）；
$（“#移动电话”）。文本（标题）；
$（“：mobile pagecontainer”）.pagecontainer（“更改”、“标题”、{转换：“幻灯片”}）；
}); 

更新

---

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

有更简单的方法吗？我觉得这有点复杂。我在找这样的东西： 但是使用我上面的代码。谢谢

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

---

在该示例中，他重复使用相同的详细信息页面，并更新您单击的每部电影的内容。你不明白哪一部分？