Получение кнопки «Загрузить больше», чтобы прекратить умножение и добавить в конец моего списка - PullRequest
Новая
       10

Получение кнопки «Загрузить больше», чтобы прекратить умножение и добавить в конец моего списка

1 голос
/ 13 марта 2012

Я новичок в jQuery Mobile и работаю со списком, который динамически генерируется с помощью ajax. Теперь у меня была некоторая помощь, чтобы заставить это загрузить определенное количество элементов, а затем с помощью кнопки «Загрузить еще», чтобы добавить больше элементов в этот список. У меня есть несколько проблем, которые я не могу решить.

  1. Я не могу заставить "Load More" добавить внизу

2 Кнопка «Загрузить еще» добавляется несколько раз в мой список при нажатии. Он удерживает нажатой последнюю кнопку, а затем добавляет новую вниз.

Вот мой код:

Это то, что генерирует контент при загрузке страницы 

function runBrowse() {

        //Check if all fields have a value
        $.ajax({
            url: "http://www.example.com",
            data: {firstName: "", middleName: "", lastName: "", resultSize:10},
            success: browseSuccess,
        });
    }

    function runBrowseContinue(restart) {

        //Check if all fields have a value
        $.ajax({
            url: "http://www.example.com",
            data: {restartLine: restart, resultSize:10},
            success: browseSuccess,
        });
    }



    function browseSuccess(browseResults){
        $.mobile.changePage('#results');
        restartLine = browseResults.restartLine;
        jQuery.each(browseResults.people,handlePerson);
    }



    //Usage getMoreData(browseResults.restartLine);
    function getMoreData(restartLine){
        if(restartLine){
            runBrowseContinue(restartLine);
        }
    }

    function handlePerson(index, value) {
        var output = '';

        // Add these returns to listview
        output += '<li>' + '<h3>' + value.name + '</h3>' + '<p>' + value.height + '</p>' + '<p>' + value.weight + 'lbs.' + '</p>' + '</li>';
        $('#listview').append(output).listview('refresh');
    }

Это код загрузки Подробнее 

$loadMore = $('ul').children('.load-more');
    $loadMore.bind('click', function () {
        var out = [];
        out.push(getMoreData(restartLine));
        $('ul').append(out.join('')).append($loadMore).listview('refresh');
    });

Это мой HTML 

  <ul data-role="listview" class="listContent" id="listview">

    <li class="load-more"><a href="#">Load More</a></li>
  </ul>
</div>

Спасибо за любую помощь:)

Снимок экрана:

http://cl.ly/2l0w3I0G0f112f381g1f

http://cl.ly/0N002X2Z45320r2Y1K38

1 Ответ

1 голос
/ 13 марта 2012

На ваших скриншотах выглядит так, как будто функция handlePerson добавляет больше «людей» в список, не перемещая кнопку «Загрузить еще» вниз, что будет означать наличие элементов списка под «Загрузить еще» кнопка. 

function handlePerson(index, value) {
    var output = '';

    // Add these returns to listview
    output += '<li>' + '<h3>' + value.name + '</h3>' + '<p>' + value.height + '</p>' + '<p>' + value.weight + 'lbs.' + '</p>' + '</li>';
    var $loadMore = $('#listview').children('.load-more');
    $('#listview').append(output).append($loadMore).listview('refresh');
}

Когда вы добавляете элемент DOM, который уже существует, jQuery переместит его в новое место и удалит из старого: http://api.jquery.com/append

Я бы хотел предупредить об этом, однако. Это делает две манипуляции с DOM для каждого индекса («персона»). Было бы лучше буферизовать весь вывод элемента списка и добавить его сразу, что приведет к небольшому повторному потоку вашего кода: 

function browseSuccess(browseResults){
    $.mobile.changePage('#results');
    restartLine = browseResults.restartLine;
    var out = [];
    jQuery.each(browseResults.people,function (i, v) {
        out.push(handlePerson(i, v));
    });
    var $loadMore = $('#listview').children('.load-more');
    $('#listview').append(out.join('')).append($loadMore).listview('refresh');
}

function handlePerson(index, value) {
    return '<li>' + '<h3>' + value.name + '</h3>' + '<p>' + value.height + '</p>' + '<p>' + value.weight + 'lbs.' + '</p>' + '</li>';
}

Как видите, было бы просто удалить все функции handlePerson() и поместить их код в цикл $.each() в функции browseSuccess().

...