如何將html作爲字符串傳遞給另一個函數？

Question

我正面臨以下問題。我有一個函數，它返回成功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); 
} 

所以第一個函數給出錯誤，因爲 「我」 是不確定的。我想將「loopHTML」內容傳遞給「function loop（）」，我希望它循環「receivedData [i]」。我想我應該將「loopHTML」內容轉換爲字符串，但如何告訴unstring「receivedData [i]」位置？你能告訴我更好的方法嗎？請不要建議我插件，因爲我想做簡單的無限滾動。提前致謝！

Answer 1

我想你想要的是傳遞給infinityScroll函數包含接收的數據，並可以採取i作爲參數：

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函數的其餘部分，以便在沒有更多電影數據時停止嘗試滾動。