如何将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函数的其余部分，以便在没有更多电影数据时停止尝试滚动。