Ленивая загрузка опций элемента SELECT с jquerymobile, c # и asp.net - PullRequest
Новая
       21

Ленивая загрузка опций элемента SELECT с jquerymobile, c # и asp.net

3 голосов
/ 03 марта 2011

У меня есть элемент SELECT на одной из моих страниц jQuery Mobile, который имеет много возможных значений.Очевидно, что при загрузке всех страниц при загрузке страницы возникают проблемы с производительностью мобильных телефонов.Что такое хороший способ загрузки товаров "по требованию"?

Пример того, что мне нужно, это то, как Android Market загружает списки приложений: x количество элементов, загружаемых изначально, затем x больше элементов загружаются, как только вы прокрутите страницу до конца, затем x больше ... и т. д.).

Я использую C # / ASP.NET (синтаксис Razor) для реализации jQuery Mobile.

1 Ответ

5 голосов
/ 08 марта 2011

Вот мое решение.Идея состоит в том, чтобы реализовать своего рода разбиение на страницы в стиле Твиттера, и вы должны отрисовать некоторые варианты с самого начала. 

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>

        <div data-role="fieldcontain">
            <label for="select-choice-1" class="select">Choose shipping method:</label>
            <select name="select-choice-1" id="select-choice-1">
                <option value="standard">Standard: 7 day</option>
                <option value="rush">Rush: 3 days</option>
                <option value="express">Express: next day</option>
                <option value="overnight">Overnight</option>
                <option value="-1">More...</option>
            </select>
        </div>

        </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Затем подключите некоторые обработчики к опции Больше 

<script type="text/javascript">
    $(document).bind("pageshow", function(){
        bindMore();
    });

    function bindMore(){
        // The rendered select menu will add "-menu" to the select id
        $("#select-choice-1-menu li").last().click(function(e){handleMore(this, e)});
    }

    function handleMore(source, e){

        e.stopPropagation();

        var $this = $(source);

        $this.unbind();

        $this.find("a").text("Loading...");

        // Get more results
        $.ajax({
            url: "test.js",
            dataType: "script",
            success: function(data){
                $(eval(data)).each(function(){

                    // Add options to underlaying select
                    $("#select-choice-1 option").last()
                        .before($("<option></option>")
                        .attr("value", this.value)
                        .text(this.text)); 

                });

                // Refresh the selectmenu
                $('#select-choice-1').selectmenu('refresh');

                // Rebind the More button
                bindMore();

            }
        });
    }
</script>

Тест.js содержит это: 

[
        {"value": "1", "text": "1"},
        {"value": "2", "text": "2"},
        {"value": "3", "text": "3"}
]
...