动态列表视图填充（三个列表，每页一个 - 都在相同的 HTML 中）

Question

我有一个 HTML 页面，其中需要三个 jqm pages (data-role=page)（命名为 #one、#two、#three）。在每个页面#one 中，我在标题中还有一个后退按钮。在每一页中，我都有一个简单的listview。在生成 HTML 时，仅填充页面 #one 上的 listview。单击列表中的项目时，我执行一些 ajax 来获取下一个列表的内容并填充它。一切正常，直到我单击后退按钮并从列表中选择不同的项目。结果是格式良好的 jqm listview 变成了链接的垂直列表，而不是 jqm 样式和带有内容的彩色水平条。

我的 HTML 和脚本如下。

<div data-role="page" id="one">
    <div data-role="header">
        <h1>Make</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-theme="b" id="cutpoint_makes_mobile">
            @foreach (var make in Model)
            {
                <li><a href="#">@make</a></li>
            }
        </ul>
    </div>
</div>
<div data-role="page" id="two">
    <div data-role="header">
        <a href="#one" data-role="button" data-icon="arrow-l">Back</a>
        <h1>Model</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-theme="b" id="cutpoint_models_mobile">
        </ul>
    </div>
</div>
<div data-role="page" id="three">
    <div data-role="header">
        <a href="#two" data-role="button" data-icon="arrow-l">Back</a>
        <h1>Size</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-theme="b" id="cutpoint_sizes_mobile">
        </ul>
    </div>
</div>
<div data-role="page" id="four">
    <div data-role="header">
        <a href="#three" data-role="button" data-icon="arrow-l">Back</a>
        <h1>Details</h1>
    </div>
    <div data-role="content">
        <h2 id="cutpoint_detail_mobile">
        </h2>
    </div>
</div>

...和jquery代码...

var make = null;
var model = null;

$(document).ready(function () {
    $("#cutpoint_makes_mobile a").click(function () {
        make = $(this).text();
        loadAllModelsMobile_Request(make);
    });
    $("#cutpoint_models_mobile a").live("click", function () {
        model = $(this).text();
        loadAllSizesMobile_Request(make, model);
    });
    $("#cutpoint_sizes_mobile a").live("click", function () {
        var size = $(this).text();
        loadDetailsMobile_Request(make, model, size);
    });
});

// NOTE, only the load models ajax calls are listed for brevity
// *** loadAllModelsMobile (Request/Response/Error) ***
function loadAllModelsMobile_Request(make) {
    var qs = "make=" + make;
    var url = "/HomeJson/CutPointsAllModels";
    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: qs,
        success: loadAllModelsMobile_Response,
        error: loadAllModelsMobile_Error
    });
}
function loadAllModelsMobile_Response(data) {
    if (data.Success) {
        $("#cutpoint_models_mobile").find("li").remove().end();
        model = null;
        $.each(data.Data, function () {
            $("#cutpoint_models_mobile").append('<li><a href="#">' + this + '</a></li>');
        });
        $.mobile.changePage($("#two"));
    } else {
        // ToDo: handle errors
        //$("#admin_alert_msg").text(data.Data);
        //$("#dlg_admin_alert").dialog("open");
    }
}
function loadAllModelsMobile_Error(xhr) {
    // ToDo: handle errors
    //showAjaxErrorMessage("loadAllModelsMobile_Error", xhr.status, xhr.response);
}

我什至使用了pagebeforechange 事件通知并清除了那里的li，但没有任何变化（与清除ajax 响应中的li 相同，因为那是在页面更改之前）。

我的问题：我如何让 jqm 在列表已经被样式化一次并且我删除/替换其内容后对其进行样式化？

Answer 1

一些笔记；此行不需要 .end() 函数调用，该函数用于返回上一个选择，并且您没有对选择进行任何操作：

$("#cutpoint_models_mobile").find("li").remove().end();

应该改为：

$("#cutpoint_models_mobile").find("li").remove();

附加每个 LI 会消耗大量 CPU，更好的选择是编造一个字符串或创建一个 LI 数组。

变化：

    $.each(data.Data, function () {
        $("#cutpoint_models_mobile").append('<li><a href="#">' + this + '</a></li>');
    });

收件人：

    var output = [];
    for (var i = 0, len = data.Data.length; i < len; i++) {
        output[output.length] = '<li><a href="#">' + data.Data[i] + '</a></li>';
    }
    $("#cutpoint_models_mobile").append(output.join(''));

我使用的for 循环的执行速度也比$.each() 快（尽管$.each() 比$(<selector>)).each() 和for (a in b) 快很多）。

现在回答您的问题。

如果您更新它们的结构，您必须手动刷新listview 小部件（和所有其他小部件）。您可以通过将字符串传递给.listview() 函数来执行此操作：“刷新”。所以上面的例子会变成这样：

    var output = [];
    for (var i = 0, len = data.Data.length; i < len; i++) {
        output[output.length] = '<li><a href="#">' + data.Data[i] + '</a></li>';
    }
    $("#cutpoint_models_mobile").append(output.join('')).listview('refresh');

listview 小部件的文档在此处：http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html（有关更新 listview 的部分位于页面底部）

更新

有时您会遇到不知道listview 是否已初始化的问题。您可以检查<ul> 元素上是否存在.ui-listview 类，如果存在则listview 已经被初始化：

    var output    = [],
        $listview = $("#cutpoint_models_mobile");
    for (var i = 0, len = data.Data.length; i < len; i++) {
        output[output.length] = '<li><a href="#">' + data.Data[i] + '</a></li>';
    }

    $listview.append(output.join(''))
    if ($listview.hasClass('ui-listview')) {
        $listview.listview('refresh');
    } else {
        $listview.trigger('create');
    }