1

#homepage から #addresses への単一ページ遷移があり、ページ #addresses には $.ajax WebApi 呼び出しに基づく動的リストビュー ビルドが含まれています。

問題は、2 番目のページに到達したときにリストビューの構成が表示されることです。それを避けたいのですが、#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>
4

1 に答える 1