jQuery Mobile - 带有自定义对象的详细信息页面

Question

我正在通过 getJSON 加载一个充满项目的 ListView 。

但是当我点击 ListView 项目时，我想到达该项目的“详细信息”页面。

现在，例如在 ASP.NET 中，您可以执行 Details.aspx?Id=1，但是在 jQuery Mobile 中我该怎么做？当我通过 getJSON 方法获取对象时。我需要将它们存储在数组或其他东西中吗？

我应该补充一点，在我当前的 getJSON 响应中，没有一个对象具有与其关联的 ID。但这只是一个沙箱，我只是在玩 jQuery Mobile 并从 Flickr 获取我的提要:

$(function() { 

     $.mobile.showPageLoadingMsg("Laddar...");

     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
       {
         tags: "cat",
         tagmode: "any",
         format: "json"
       },

       function(data) {

         $.each(data.items, function(i,item){

             $('#list')
             .append('<li><a><img src="images/de.png" class="ui-li-icon">' + item.author + '</a></li>')
             .listview('refresh');

             });

         $.mobile.hidePageLoadingMsg();

       });

});

在 jQuery Mobile 中设置“详细信息页面”的做法是什么？我是否应该在上面的代码中使用 id=x 创建 ，然后以某种方式在数组中的该索引处获取一个对象(我尚未创建)？

Answer 1

首先，您可以采取一些措施来大大提高代码的性能:

$(function() { 

     var photos = {};

     $.mobile.showPageLoadingMsg("Laddar...");

     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
       {
         tags: "cat",
         tagmode: "any",
         format: "json"
       },

       function(data) {

         //store photo data for later
         photos = data;

         //setup an array (or string) to buffer the output
         var output = [];

         for (var i = 0, len = data.items.length; i < len; i++) {

             //add this index to the output array
             output.push('<li><a data-index="' + i + '" href="#"><img src="images/de.png" class="ui-li-icon">' + data.items[i].author + '</a></li>');

         }

         //here I am selecting the list element only once and only refreshing it once
         $('#list').append(output.join('')).listview('refresh');

         $.mobile.hidePageLoadingMsg();

       });

});

现在，您可以将 click 事件处理程序添加到 #list ListView 中的链接，并为 jQuery Mobile 创建必要的伪页面:

$('#list').delegate('a', 'click', function (event) {

    //get the index of this page/link and cache some objects
    var $this   = $(this),
        index   = $this.attr('data-index'),
        $toPage = $('#details_' + index);

    //stop the browser from scrolling to the top of the page due to the hash mark (#) in the link's href attribute
    event.preventDefault();

    //check to see if the page for the link clicked already exists, if so then don't re-add it to the DOM
    if ($toPage.length === 0) {

        //no page was found so create one, we can access the photos object to insert data related to the link clicked
        $('body').append('<div data-role="page" id="details_' + index + '"><div data-role="content"><p>Some Key: ' + photos.items[index].some_key + '</p><a data-role="button" href="#home">Back Home</a></div></div>');

        //set the $toPage variable to the newly added page so jQuery Mobile can navigate to it
        $toPage = $('#details_' + index);
    }

    //change to the desired page
    $.mobile.changePage($toPage);
});

这是一个演示:http://jsfiddle.net/m4Yt8/

我不确定您的 JSON 是什么样子，因此我无法确定如何将 JSON 对象中的数据添加到新页面中，但是上面的模板应该非常接近。