jquerymobile, C# 및 asp.net w/jquerymobile, SELECT 요소 옵션을 게으른로드

Question

가능한 많은 값을 가진 내 jQuery Mobile 페이지 중 하나에 SELECT 요소가 있습니다. 분명히 페이지로드에 모든 옵션을로드하면 모바일 핸드셋의 성능 문제가 발생합니다. "주문형"으로 상품을 적재하는 좋은 방법은 무엇입니까?

Android 마켓에서 앱 목록을로드하는 방법을 예로 들자면 x 개의 항목이 처음에로드 된 다음 x 개의 항목이 옵션의 맨 아래로 스크롤 한 다음 x 개의 항목을 더로드 한 다음 곧).

저는 C#/ASP.NET (Razor syntax)을 사용하여 jQuery Mobile을 구현하고 있습니다.

Answer 1

여기 내 해결책이 있습니다. 아이디어는 일종의 트위터와 같은 페이지 매김을 구현하는 것이며, 처음부터 몇 가지 선택을 렌더링해야합니다.

<div data-role="page"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Page content goes here.</p> 

     <div data-role="fieldcontain"> 
      <label for="select-choice-1" class="select">Choose shipping method:</label> 
      <select name="select-choice-1" id="select-choice-1"> 
       <option value="standard">Standard: 7 day</option> 
       <option value="rush">Rush: 3 days</option> 
       <option value="express">Express: next day</option> 
       <option value="overnight">Overnight</option> 
       <option value="-1">More...</option> 
      </select> 
     </div> 

     </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

는 그 다음 더 많은 옵션

<script type="text/javascript"> 
    $(document).bind("pageshow", function(){ 
     bindMore(); 
    }); 

    function bindMore(){ 
     // The rendered select menu will add "-menu" to the select id 
     $("#select-choice-1-menu li").last().click(function(e){handleMore(this, e)}); 
    } 

    function handleMore(source, e){ 

     e.stopPropagation(); 

     var $this = $(source); 

     $this.unbind(); 

     $this.find("a").text("Loading..."); 

     // Get more results 
     $.ajax({ 
      url: "test.js", 
      dataType: "script", 
      success: function(data){ 
       $(eval(data)).each(function(){ 

        // Add options to underlaying select 
        $("#select-choice-1 option").last() 
         .before($("<option></option>") 
         .attr("value", this.value) 
         .text(this.text)); 

       }); 

       // Refresh the selectmenu 
       $('#select-choice-1').selectmenu('refresh'); 

       // Rebind the More button 
       bindMore(); 

      } 
     }); 
    } 
</script> 

Test.js 일부 핸들러 후크는이 포함

[ 
     {"value": "1", "text": "1"}, 
     {"value": "2", "text": "2"}, 
     {"value": "3", "text": "3"} 
]