jQuery Mobile - カスタムオブジェクトの詳細ページ

Question

getJSONでアイテムのリストビューを読み込んでいます。

しかし、私がリストビューアイテムをタップすると、そのアイテムの詳細ページに到達したいと思います。

ここでASP.NETでは、Details.aspx？Id = 1を実行しますが、jQuery Mobileではどのようにしますか？とき私は私のgetJSONメソッドを介してオブジェクトを取得します。それらを配列などに格納する必要がありますか？

私の現在のgetJSON応答では、オブジェクトにIDが結び付けられていないことを追加する必要があります。しかし、これはただのサンドボックスで、私はjQueryのモバイルで遊んや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のモバイルで「詳細ページ」を設定する際に実践とは何ですか？上記のコードをid = xで作成し、それから何らかの形で配列（私はまだ作成していない）のインデックスにオブジェクトを取得する必要がありますか？

$(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(); 

     }); 

}); 

今、あなたは#listリストビュー内のリンクにclickイベントハンドラを追加し、必要に応じて作成することができます：あなたが大幅にあなたのコードのパフォーマンスを向上させるために行うことができますいくつかのものがあるまずオフ

Answer 1

jQueryのモバイル用疑似ページ：

$('#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オブジェクトのデータを新しいページに追加する方法については言いませんが、上記のテンプレートはかなり近いはずです。