Question

这涉及jQuery Mobile 1.0 Beta 1

我喜欢jQuery Mobile但是对于上帝的爱，我无法弄清楚如何动态添加列表项。我首先尝试不绑定pagebeforecreate事件 - 项目被附加到DOM但是不可见，即使我尝试调用以下的许多组合：

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

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

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

我得到了“结果表达式'b [0]'[未定义]不是一个对象。”错误。

然后我想我可以绑定到pagebeforecreate事件来附加li-items，然后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

我在最后一个alpha版本中有这个工作，但是还没有在测试版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至关重要，脚本的位置也是如此。

Answer 2

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

在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);
            }
    }
});

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

2 个答案: