Question

我有一个包含以下代码的ascx控件

<div class="test" data-bind="template: { name: 'sampleDetailed-template', foreach: viewModel.sampleData.dataList }">
</div>
<script type="text/html" id="'sampleDetailed-template"> 
 <div>No:     <!--ko text: number--><!--/ko--></div>
</script>

目前我正在从一个ajax调用中填充sampleData，这将返回一个数据列表。例如100.它将显示100个这样的Divs.It工作正常。

但是现在我想用不同的ajax调用分割UI和绑定部分（在上面的例子中有10个调用）。我将在10个调用中获得100个。我希望将该部分绑定为10，然后是10等。 ..以避免批量数据问题。

在页面

中添加了ASCX控件

如何使用淘汰赛来实现这一目标。

Answer 1

ko.observableArray支持开箱即用。每当您将项目推送到它时，UI都会更新。每个请求的回调类似于obsArr(obsArr().concat(newData))。

以下是一个例子：

var myData = ko.observableArray([
  { number: 1 },
  { number: 2 },
  { number: 3 },
]);

var loadData = function(newData) {
  var current = myData();  
  
  // Create mock-data for this example
  for (var i = 0; i < 10; i += 1) {
    current.push({ number: current.length });
  }
  
  myData(current);
  
};
  
ko.applyBindings({viewModel: { sampleData: { dataList: myData } } , load: loadData});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="test" data-bind="template: { name: 'sampleDetailed-template', foreach: viewModel.sampleData.dataList }">
</div>
<button data-bind="click: load">load more</button>

<script type="text/html" id="sampleDetailed-template"> 
 <div>No:     <!--ko text: number--><!--/ko--></div>
</script>

多个AJAX调用使用knock Out绑定一个部分

1 个答案: