jQuery Mobile - 사용자 정의 개체가있는 세부 정보

Question

getJSON을 통해 항목으로 가득 찬 목록보기를로드하고 있습니다.

하지만 목록보기 항목을 탭하면 해당 항목의 세부 정보 페이지에 도착하고 싶습니다.

이제 ASP.NET에서 Details.aspx? Id = 1을 수행 하겠지만 jQuery Mobile에서는 어떻게 할 것인가? 내 getJSON 메서드를 통해 객체를 가져올 때. 어레이에 저장해야합니까?

필자는 현재의 getJSON 응답에 객체를 묶은 ID가 없다는 것을 추가해야합니다.

$(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를 모바일에서 "세부 사항 페이지를"설정의 실천은 무엇입니까 :하지만이 난 그냥 jQuery를 모바일로 장난 플리커 (Flickr)에서 내 피드를 받고 있어요, 그냥 샌드 박스인가? 위의 코드에서 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(); 

     }); 

}); 

당신은 #list 목록보기의 링크에 click 이벤트 핸들러를 추가하고 필요를 만들 수 있습니다 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 개체에서 데이터를 추가 말할 수 없다, 위의 템플릿을 꽤 가까이 있어야합니다.