jQuery Mobile - страница сведений с пользовательскими объектами

Question

Я загружаю представление списка, полное пунктов через getJSON.

Но когда я нажимаю на элемент списка, я хочу попасть на страницу Подробно для этого элемента.

Теперь в ASP.NET, например, вы бы сделали Details.aspx? Id = 1, но как мне это сделать в jQuery Mobile? Когда я получаю объекты через мой метод getJSON. Нужно ли хранить их в массиве или что-то?

Я должен добавить, что в моем текущем ответе getJSON ни один из объектов не имеет привязанного к нему идентификатора. Но это всего лишь песочница, я просто играю с 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 на новые страницы, однако приведенный выше шаблон должен быть довольно близок.