1

私はjQueryMobileの初心者であり、ajaxで動的に生成されるリストを使用しています。これで、特定の量のアイテムをロードしてから、[さらにロード]ボタンを使用して、このリストにさらにアイテムを追加することができました。理解できない問題がいくつかあります。

  1. 下部に追加する「LoadMore」を取得できません

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コードです

$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

4

1 に答える 1

1

スクリーンショットからは、[さらに読み込む]ボタンを下に移動せずに、関数がリストに「人」を追加しているように見えます。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

ただし、これに対して警告したいと思います。これにより、インデックス（ "person"）ごとに2つの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()です。

于 2012-03-13T18:16:26.843 に答える