1

次の問題に直面しています。成功時に JSON データを返す関数があります。私は無限スクロールを作成しようとしているので、この関数では、作業を行う別の関数でループするための html を準備しています。サーバーは JSON を次のように返します。

{ "id" : 6,
  "title" : "Store Title #1",
  "movies" : [{ "id" : 1164,
                "title" : "Movie 1",
                "publishDate" : "1993-01-01T00:00:00",
                "description" : "{long description...}" },
              { "id" : 8452,
                "title" : "Movie 2",
                "publishDate" : "1985-01-01T00:00:00",
                "description" : "{long description...}" },
              { "id" : 6451,
                "title" : "Movie 3",
                "publishDate" : "1945-01-01T00:00:00",
                "description" : "{long description...}" }]
}

成功時の機能:

     function onsuccess(data) {
        var libraryInfoHTML = '<h2 data-id="' + data.id + '">' + data.title + '</h2><ul></ul>';
        var receivedData = data.movies;
        var loopHTML = 
            '<li>' +
                '<h3 class="clear"><span class="icons video-library video-icon"></span>' +
                    '<a href="#" title="' + receivedData[i].title + '" data-id="' + receivedData[i].id + '">' +
                        receivedData[i].title +
                    '</a>' +
                '</h3>' +
                '<h4 class="clear"><span class="icons publish-date"></span>' +
                    receivedData[i].publishDate +
                '</h4>' +
                '<p>' +
                    receivedData[i].description +
                '</p>' +
            '</li>';
    infinityScroll(receivedData, loopHTML);
}

無限スクロール機能:

function infinityScroll(received_data, loop_HTML) {
    var i=0;
    var length = received_data.length;
    var items_to_load = 10;
    function loop() {
        var html_maker = '';
        for(; i<items_to_load; i++) {
            html_maker +=
                loop_HTML;
        }
        items_to_load += i;
        $('#container ul').append(html_maker);
    }

    function scroller() {
        if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.95){
            loop();
        }
    }
    $(window).scroll(scroller);
}

したがって、「i」が定義されていないため、最初の関数はエラーを返します。「loopHTML」コンテンツを「function loop()」に渡し、「receivedData[i]」をループさせたい。「loopHTML」コンテンツを文字列に変換する必要があると思いますが、文字列以外の「receivedData[i]」の場所をどのように伝えるのですか? これを行うより良い方法を教えてもらえますか? シンプルな無限スクロールを作りたいので、プラグインを提案しないでください。前もって感謝します！

4

1 に答える 1

0

i必要なのは、受信したデータを含み、パラメーターとして受け取ることができる関数をinfinityScrollに渡すことだと思います。

 function onsuccess(data) {
     var libraryInfoHTML = '<h2 data-id="' + data.id + '">' + data.title + '</h2><ul></ul>';

     var htmlFunction = (function () {
         var receivedData = data.movies;
         return function (i) {
             if (i < receivedData.length) {
                 return '<li>' +
                     '<h3 class="clear"><span class="icons video-library video-icon"></span>' +
                     '<a href="#" title="' + receivedData[i].title + '" data-id="' + receivedData[i].id + '">' + receivedData[i].title +
                     '</a>' +
                     '</h3>' +
                     '<h4 class="clear"><span class="icons publish-date"></span>' + receivedData[i].publishDate +
                     '</h4>' +
                     '<p>' + receivedData[i].description +
                     '</p>' +
                     '</li>';
             }
         };
     })();
     infinityScroll(htmlFunction);
 }

次に、infinityScrollを調整します...

function infinityScroll(loopHtmlFunction) {
    var items_to_load = 10;
    var i = 0;
    var html;
    function loop() {
        var html_maker = '';
        for(; i<items_to_load && html = loopHtmlFunction(i); i++) {
            html_maker += html;
        }
        items_to_load += i;
        $('#container ul').append(html_maker);
    }    
    // etc.
}

これにより、映画データがさらに存在することも確認され、存在しreceivedDataない場合はhtmlに追加されないことに注意してください。ただし、infinityScroll映画データがなくなるとスクロールを停止するように、関数の残りの部分を調整することをお勧めします。

于 2013-02-08T16:39:22.380 に答える