javascript - 实现 Knockout.js 破坏性 foreach 循环

Question

这是带有数据绑定(bind)元素的 html:

div data-bind="foreach: clientRequests" id="test2">
           <div class="list-group" >
               <a href="#" class="list-group-item active"><b data-bind="text: client"></b></a>
               <a href="#" class="list-group-item"><b>Priority: </b><b data-bind="text: client_priority"></b></a> 
               <a href="#" class="list-group-item"><b>Title: </b><b data-bind="text: title"></b></a>
               <a href="#" class="list-group-item"><b>Description: </b><b data-bind="text: description"></b></a> 
               <a href="#" class="list-group-item"><b>Product Area: </b><b data-bind="text: product_area"></b></a>
               <a href="#" class="list-group-item"><b>Target Date: </b><b data-bind="text: target_date"></b></a>
               <a href="#" class="list-group-item"><b>Ticket URL: </b><b data-bind="text: ticket_url"></b></a>
           </div>
        </div>

这就是我将名为 requestsArray 的数组传递给 foreach 循环的方式:

ko.cleanNode(document.getElementById('test2'));

        ko.applyBindings({
            clientRequests: requestsArray
        }, document.getElementById('test2'));

对于不同的 AJAX 调用，会返回不同的 requestArray。例如，在初始页面加载后，会进行 AJAX 调用，该调用接收 requestArray 的一个实例，该实例可能有 10 个项目。 foreach 循环的行为似乎符合预期，数组中的所有 10 个项目都填充在页面上。然后，进行第二次 AJAX 调用，但这次数组可能只有 5 个项目。所发生的情况是，每个项目重复两次，页面上总共出现 10 个项目。

问题似乎是，即使 ko.cleanNode(document.getElementById('test2')) 之前被调用过:

ko.applyBindings({
                clientRequests: requestsArray
            }, document.getElementById('test2'))

对于每个新数组，每次 foreach 迭代创建的 HTML 元素数量都会随着每个新数组而不断增加。使用 Vue.js，每次将新数组传递给数据绑定(bind)和 for 循环时，它本质上都是破坏性的，并且不会保留数组上一次迭代中的任何内容。

显然，在这种情况下使用 ko.cleanNode 不起作用，我知道 in the docs有一个示例确实执行了我认为正确的过程，但通过按钮和 self.array.remove(this) 一次只能处理一个 html 元素，我不太确定如何调整它以彻底清除从数组 foreach 迭代创建的所有 html 元素。

Answer 1

我不明白为什么您必须手动重新应用绑定(bind)。具有可观察数组的 View 模型的全部要点是， knockout 会为您处理数据更新...通常，当您使用 cleanNode 时，有一种更简单的方法来完成任务。

你尝试过这样的事情吗？

// Apply bindings _once_, viewmodel instance does not change
// in between requests
ko.applyBindings(new ViewModel());


function ViewModel() {
  // Because the array is observable, knockout will
  // monitor for changes and update the UI
  this.requests = ko.observableArray([]);
  
  // The view model has the request method
  // the .done callback writes the results to the observable
  // requests array
  this.doRequest = function() {
    mockupAjaxGetter().done(this.requests);
  }.bind(this);
  
  // Do an initial request
  this.doRequest();
};



// Mockup code, just to produce some random numbers on a timeout
function mockupAjaxGetter() {
  var randomResults = [];
  for (var i = 0; i < Math.random() * 20; i += 1) {
     randomResults.push(Math.random()); 
  }
  var cb;
  var applyCb = function() {
    if (cb) cb(randomResults); 
  }
  
  setTimeout(applyCb, 500);
  
  return {
    done: function(fn) { cb = fn; }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<ul data-bind="foreach: requests">
  <li data-bind="text: $data"></li>
</ul>
<button data-bind="click: doRequest">New request</button>