使用 jQuery Mobile 创建和修改列表？答案

【问题标题】：Creating and modifying lists with jQuery Mobile?使用 jQuery Mobile 创建和修改列表？
【发布时间】：2011-07-01 22:08:02
【问题描述】：

这涉及 jQuery Mobile 1.0 Beta 1

我喜欢 jQuery Mobile，但看在上帝的份上，我不知道如何动态添加列表项。我第一次尝试不绑定 pagebeforecreate 事件——这些项目被附加到 DOM 但不可见，即使我尝试调用以下的许多组合：

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

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

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

我得到“表达式 'b[0]' [undefined] 的结果不是对象。”错误。

然后我想我可以绑定到 pagebeforecreate 事件以在 jQuery Mobile 发挥它的魔力之前附加 li-items。但是，这无济于事..与以前的结果相同。

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

那是什么鬼？

【问题讨论】：

标签： jquery listview jquery-mobile

【解决方案1】：

我在上一个 alpha 版本中有此功能，但尚未在 beta 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 至关重要，触发它的脚本位置也很重要。

【讨论】：

给出“无法在初始化之前调用 listview 上的方法；试图调用方法 'refresh'”.. 第一个脚本在包含 JQM 之前，如您所说，后者在包含之后。
我发布的所有脚本都是在页面中引用 jQM 之前调用的，如果有帮助的话，它不是分成两半。
答案中最重要的部分是“list.listview('refresh');”

【解决方案2】：

我遇到了同样的问题，这对我有用：

在文档准备就绪时，创建动态 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);
            }
    }
});

【讨论】：