Question

我正在通过getJSON加载一个包含项目的列表视图。

但是当我点击列表视图项目时，我想要到达该项目的详细信息页面。

现在，在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列表视图中的链接，并为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对象中的数据添加到新页面中，但是上面的模板应该非常接近。

jQuery Mobile - 包含自定义对象的详细信息页面

1 个答案: