Создание и изменение списков с помощью jQuery Mobile?

Question

Это касается jQuery Mobile 1.0 Beta 1

Мне нравится jQuery Mobile, но, ради бога, я не могу понять, как динамически добавлять элементы списка. Сначала я попытался без привязки к событию pagebeforecreate - элементы были добавлены в DOM, но не были видны, даже при том, что я пытался вызвать много комбинаций из следующих:

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

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

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

Я получаю "Результат выражения 'b [0]' [undefined] не является объектом". ошибка.

Затем я решил, что могу связать событие pagebeforecreate, чтобы добавить li-элементы до того, как jQuery Mobile сделает свое волшебство. Однако это не помогает .. тот же результат, что и раньше.

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

У меня была такая же проблема, у меня это сработало:

В doc ready, создайте динамический LI без вызова .listview (), затем подключитесь к событию pagebeforeshow и вызовите listview ()один раз:

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

Answer 2

У меня это работает в последнем альфа-релизе, но я не тестировал его в бета-версии 1. У меня есть сценарий события страницы, поэтому (помните, он должен прийти до ссылки на jQuery Mobile src):

$('#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 имеет решающее значение, так же как и размещение скрипта для его запуска.