Question

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

问题在于，当我们到达第二页时，可以看到列表视图的构造，我想避免这种情况，我希望列表全部在我们登陆#addresses页面时构建。

我在iPhone的listview中也有延迟点击。

我的代码：

<!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>

Answer 1

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

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

动态listview构造在jQuery Mobile 1.4.2转换中可见

1 个答案: