jQuery Mobileでリストを作成して変更するには？

Question

これはjQuery Mobile 1.0 Beta 1に関するものです。

私はjQuery Mobileが大好きですが、神様の愛のために、リスト項目を動的に追加する方法はわかりません。

$("#categories").listview();

$("#categories").listview('refresh');

$("#categories").listview('refresh', true);

：私は、次の多くの組み合わせを呼び出す試みたとしてもカントー、項目がDOMに追加さが、見えなかったた - 私が最初pagebeforecreateイベントを結合することなく試してみました

私は "表現の結果 'b [0]' [未定義]はオブジェクトではありません。エラー。

私はjQuery Mobileがその魔法をする前に、liアイテムを追加するためにpagebeforecreateイベントにバインドできると考えました。しかし、これは前と同じ結果です。

$().ready(function() { 
    $("#browse-categories").live('pagebeforecreate', function() { 
    $.get('http://foo.com/api/categories.xml', function(data) { 
     $xml = $(data); 
     $xml.find('entry').each(function() { 
     $("#categories").append("<li>" + $(this).find('title').text() + "</li>") 
     }); 
    }); 
    }); 
}); 

HTML：だから

<div data-role="page" id="browse-categories"> 
    <div data-role="header"> 
     <h1>Categories</h1> 
    </div> 

    <div data-role="content"> 
    <ul data-role="listview" id="categories"> 
    </ul> 
    </div> 

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

一体何？

Answer 1

私は最後のアルファリリースで、この作業を持っているが、（それはjQueryのモバイルSRCが参照される前に来るように持って、覚えている）私は、このようにページイベントスクリプトを持っているベータ1でそれをテストしていません。

$('#YOUR-PAGE-ID').live('pageshow',function(event, ui){ 
    someFunction(); 
}); 

...と参照someFunctionは、このようなコードが含まれています：

var list = $("#categories"); 
list.empty(); 

$.each(results.rows, function(rowIndex){ 
    // I actually do way more than this; simplified for example 
    var data = results.rows.item(rowIndex); 
    list.append("<li>"+data+"</li>"); 
}); 

list.listview('refresh'); 

は全くその助けをしていますか？ refreshは、トリガーするスクリプトの配置と同様に重要です。

Answer 2

私はこれが私のために働いて、同じ問題を持っていた：） が、その後pagebeforeshowイベントにフックし、（リストビューを呼び出し、その上）（.listviewを呼び出すことなく、ダイナミックLIを作成し、

をdocの準備ができて一度：

$("#ModeList").bind("pagebeforeshow", function() { 
    $("#ModeList ul").listview(); 
    $(this).unbind('pagebeforeshow'); 
}); 

修正が有効です。ボトムラインは、あなたがリフレッシュの前にわずかな遅延が必要です。

$(document).bind("pagebeforechange", function(e, data) { 
    urlObj = $.mobile.path.parseUrl(data.toPage); 
    if (typeof data.toPage === "string") 
    { 
      if (page_name == "#pgMode" ) { 
       $("#ModeList").html(""); 
       setTimeout(function() { 
        $("#ModeList ul").listview(); 
       }, 1); 
      } 
    } 
});