無限滾動使用KnockoutJS與單個AJAX調用

當我使用KnockoutJS時，遇到了一種情況，我需要使用Jquery AJAX從數據庫中獲取數據。一旦我得到了響應，我需要將JSON響應與viewmodel部分逐個部分綁定，而不是綁定整個JSON。爲此我想用Jquery無限滾動功能。無限滾動使用KnockoutJS與單個AJAX調用

我發現夫婦從以前的問題的解決方案張貼在這裏without ajax call和with ajax call

但我的問題是，我只需要一個呼叫發送到數據庫並獲取匹配的記錄，並將其綁定的部分視圖模型的一部分，而不是推整個響應項目數組在我的viewmodel並綁定它。

<div id="main" data-bind="foreach: items"> 
    <div data-bind="text: properties.MAPBLKLOT"></div> 
</div> 

<script> 
var viewModel = { 
    items: ko.observableArray([]) 
}; 

var url = 'testdata.json'; 
$.getJSON(url).done(function (items) { 
    ko.utils.arrayForEach(items, function(item) { 
     viewModel.items.push(item); 
    }); 
}); 

ko.applyBindings(viewModel); 
</script>

用於測試目的，我使用了一些示例JSON發現在互聯網上，但爲了簡單的目的，我只複製幾個記錄，理想的情況是我的最終響應可能包含超過2000條記錄

這裏是我的TESTDATA以.json

[ 
{ 
    "type": "Feature", 
    "properties": { 
     "MAPBLKLOT": "2318026", 
     "BLKLOT": "2318026", 
     "BLOCK_NUM": "2318", 
     "LOT_NUM": "026", 
     "FROM_ST": "2048", 
     "TO_ST": "2048", 
     "STREET": "SANTIAGO", 
     "ST_TYPE": "ST", 
     "ODD_EVEN": "E" 
    }, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [ 
      [ 
       [ 
        -122.489637118874, 
        37.7444192929202, 
        0 
       ], 
       [ 
        -122.489651451294, 
        37.7446249545443, 
        0 
       ], 
       [ 
        -122.48954916239, 
        37.74462945745, 
        0 
       ], 
       [ 
        -122.489534792816, 
        37.7444237964457, 
        0 
       ], 
       [ 
        -122.489637118874, 
        37.7444192929202, 
        0 
       ] 
      ] 
     ] 
    } 
}, 
{ 
    "type": "Feature", 
    "properties": { 
     "MAPBLKLOT": "2318027", 
     "BLKLOT": "2318027", 
     "BLOCK_NUM": "2318", 
     "LOT_NUM": "027", 
     "FROM_ST": "2282", 
     "TO_ST": "2282", 
     "STREET": "32ND", 
     "ST_TYPE": "AVE", 
     "ODD_EVEN": "E" 
    }, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [ 
      [ 
       [ 
        -122.489449018252, 
        37.7446338654758, 
        0 
       ], 
       [ 
        -122.48954916239, 
        37.74462945745, 
        0 
       ], 
       [ 
        -122.489651451294, 
        37.7446249545443, 
        0 
       ], 
       [ 
        -122.489656228785, 
        37.7446935084171, 
        0 
       ], 
       [ 
        -122.489353664903, 
        37.7447068261707, 
        0 
       ], 
       [ 
        -122.489348875236, 
        37.7446382733974, 
        0 
       ], 
       [ 
        -122.489449018252, 
        37.7446338654758, 
        0 
       ] 
      ] 
     ] 
    } 
}, 
{ 
    "type": "Feature", 
    "properties": { 
     "MAPBLKLOT": "2318028", 
     "BLKLOT": "2318028", 
     "BLOCK_NUM": "2318", 
     "LOT_NUM": "028", 
     "FROM_ST": "2278", 
     "TO_ST": "2278", 
     "STREET": "32ND", 
     "ST_TYPE": "AVE", 
     "ODD_EVEN": "E" 
    }, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [ 
      [ 
       [ 
        -122.489253520649, 
        37.7447112340303, 
        0 
       ], 
       [ 
        -122.489353664903, 
        37.7447068261707, 
        0 
       ], 
       [ 
        -122.489656228785, 
        37.7446935084171, 
        0 
       ], 
       [ 
        -122.489661007419, 
        37.7447620622697, 
        0 
       ], 
       [ 
        -122.48924661819, 
        37.7447803023226, 
        0 
       ], 
       [ 
        -122.489241841072, 
        37.7447117484342, 
        0 
       ], 
       [ 
        -122.489253520649, 
        37.7447112340303, 
        0 
       ] 
      ] 
     ] 
    } 
}, 
{ 
    "type": "Feature", 
    "properties": { 
     "MAPBLKLOT": "2318028A", 
     "BLKLOT": "2318028A", 
     "BLOCK_NUM": "2318", 
     "LOT_NUM": "028A", 
     "FROM_ST": "2274", 
     "TO_ST": "2274", 
     "STREET": "32ND", 
     "ST_TYPE": "AVE", 
     "ODD_EVEN": "E" 
    }, 
    "geometry": { 
     "type": "Polygon", 
     "coordinates": [ 
      [ 
       [ 
        -122.489661007419, 
        37.7447620622697, 
        0 
       ], 
       [ 
        -122.489665784928, 
        37.7448306161404, 
        0 
       ], 
       [ 
        -122.489251395318, 
        37.7448488562099, 
        0 
       ], 
       [ 
        -122.48924661819, 
        37.7447803023226, 
        0 
       ], 
       [ 
        -122.489661007419, 
        37.7447620622697, 
        0 
       ] 
      ] 
     ] 
    } 
}

]

來源

2013-11-26 user3033807

您能更具體地瞭解您的問題嗎？ – Damien

那麼，你想在一次推動整個響應，而不是逐項推動它？ –

我不希望在將viewmodel綁定到我的視圖之前將整個響應推送到viewmodel，我想從響應中推入記錄集讓我們假設我的響應是否有1000條記錄我想每次用戶滾動時都要推送和綁定100個記錄頁面底部。 – user3033807

我從來沒有在這之前，但如果我這樣做，竟被想法d從您想要顯示第一個X項目的事實開始。讓我們假設你想顯示前50個項目，但只要45變爲可見，你會想顯示第100。然後你會寫是這樣的：

<!-- ko foreach: allElement --> 
<!-- ko if: $index() < $root.lastVisibleElement() --> 
... row by row here ... IMPORTANT (one element in row must have following) -> data-bind="attr:{id: $index()}" 
<!-- /ko --> 
<!-- /ko -->

在那之後，我想補充滾動事件聽衆（http://api.jquery.com/scroll/），運行一個函數來檢查是否可見id = lastVisibleElement() - 5元素（Check if element is visible after scrolling），如果是，則將lastVisibleElement增加50。

來源

2013-11-26 14:17:56 Dominictus

我試過這個，但它不能解決我的問題 – user3033807

無限滾動使用KnockoutJS與單個AJAX調用

回答

相關問題