jQuery Mobile 1.4.2 过渡中可见的动态列表视图构造答案

【问题标题】：Dymanic listview construction visible in jQuery Mobile 1.4.2 transitionjQuery Mobile 1.4.2 过渡中可见的动态列表视图构造
【发布时间】：2014-04-24 18:23:41
【问题描述】：

我有一个从 #homepage 到 #addresses 的单页转换，其中页面 #addresses 包含基于 $.ajax WebApi 调用的动态列表视图构建。

问题是，当我们到达第二页时，列表视图的构建是可见的，我想避免这种情况，我希望当我们进入 #addresses 页面时列表全部构建。

我在 iPhone 的列表视图中也有延迟点击。

我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>izigo.mobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>

        $(document).bind("mobileinit", function ()
        {
            $.mobile.toolbar.prototype.options.addBackBtn = true;
            $.mobile.toolbar.prototype.options.backBtnText = "voltar";
            $.mobile.page.prototype.options.domCache = true;
        });

    </script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script>
        /* Pass data with changePage */
        $(document).on("pageinit", "#homepage", function ()
        {
            $(".category").on("click", function ()
            {
                $.mobile.pageContainer.pagecontainer("change", "#addresses",
                    {
                    categoryId: this.id,
                    transition: "slide"
                });
            });
        });

        /* retrieve data and run function to add elements */
        $(document).on("pagebeforechange", function (e, data)
        {
            if (data.toPage[0].id == "addresses")
            {
                var categoryId = data.options.categoryId;

                clearListCategory("#addresses");
                buildListCategory("#addresses", categoryId);
            }
        });

        function clearListCategory(page)
        {
            var $page = $(page);

            $("ul", $page).remove();
        }

        function buildListCategory(page, categoryId)
        {
            $.ajax({
                type: "POST",
                url: "http://10.0.0.200/api/Mobile/GetAddresses",
                crossDomain: false,
                beforeSend: function () { $.mobile.loading('show') },
                complete: function () { $.mobile.loading('hide') },
                data: { CategoryId: categoryId },
                dataType: 'json',
                success: function (addresses)
                {
                    showAddresses(page, addresses);
                },
                error: function () {
                    console.log("loadList error!");
                }
            });
        }

        function showAddresses(page, addresses)
        {
            var $page = $(page);

            var list = $("<ul/>", {
                "data-role": "listview"
            });

            var items = '';

            $.each(addresses, function (i, address)
            {
                items = $("<li>" + address.Name + "</li>");
                list.append(items);
            });

            $(".ui-content", $page).append(list);
            $("ul", $page).listview();
        }
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <!-- home-page -->
    <div data-role="page" id="homepage">

        <div data-role="header" data-position="fixed"><h1>mobile</h1></div>

        <div class="ui-content" role="main">

            <ul data-role="listview" id="categories">
                <li><a href="#" id="3" class="category">Oficina</a></li>
                <li><a href="#" id="100" class="category">Seguro</a></li>
                <li><a href="#" id="101" class="category">Reboque</a></li>
            </ul>

        </div>

    </div>

    <!-- page addresses list -->
    <div data-role="page" id="addresses">

        <div data-role="header" data-position="fixed"><h1>mobile</h1></div>

        <div class="ui-content" role="main"></div>

    </div>

</body>
</html>

【问题讨论】：

你可以在pagecontainershow上运行函数。
查看jsfiddle.net/Palestinian/S87Hw
嗨奥马尔，谢谢，但列表视图仅在第二页加载时构建（转换发生，然后显示加载器，然后是列表视图），我只想在列表视图之后进行转换完成了
这是example 和code。在演示中，页面在 Ajax 调用（虚拟调用）成功后发生变化。
让我们continue this discussion in chat

标签： jquery-mobile jquery-mobile-listview jquery-mobile-ajax

【解决方案1】：

您正在使用的代码，您在pagebeforechange 事件上填充listview，该事件在任何其他页面事件 之前触发。您应该在导航到目标页面之前填充 listview，使用 .success 或 .complete 回调。

$.ajax({
    type: "POST",
    url: "URL",
    crossDomain: false,
    beforeSend: function () {
        $.mobile.loading('show')
    },
    complete: function () {
        $.mobile.loading('hide')
    },
    data: {
        CategoryId: categoryId
    },
    dataType: 'json',
    success: function (addresses) {
        showAddresses(page, addresses);
        $.mobile.pageContainer.pagecontainer("change", "#addresses");
    },
    error: function () {
        console.log("loadList error!");
    }
});

Demo - Code

【讨论】：