実装Knockout.js破壊的なforeachループ

Question

ここでは、データバインド要素を持つ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> 

これは私が配列foreachループにrequestsArrayと呼ば渡している方法です：

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

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

さまざまなAJAX呼び出しで、異なるrequestArrayが返されます。たとえば、最初のページ・ロードの後、requestArrayの1つのインスタンスを受け取るAJAX呼び出しが行われます。これは10個の項目を持つことがあります。 foreachループは予想どおりに動作しているようで、配列内の10個の項目すべてがページに表示されます。次に、2回目のAJAX呼び出しが行われますが、今回は配列が5つしかない場合があります。何が起こるかは、各項目が2回繰り返され、合計10項目がページに表示されます。

問題がko.cleanNode(document.getElementById('test2'))が前に呼び出されても、ということのようです：それぞれの新しい配列を

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

、各foreach反復によって作成されたHTML要素の数は、それぞれの新しい配列に増加し続けます。 Vue.jsでは、新しい配列をデータバインディングとforループに渡すたびに、それは本質的に破壊的であり、以前の繰り返しから何も保持しません。

明らかに、このシナリオではここで働いて、私は私が何を考えてやるんが正しい手順である例があるin the docs知っているが、ボタンやself.array.remove(this)を経由して、一度に1つのHTML要素はありませんko.cleanNode使用し、配列foreachの反復から作成されたすべてのhtml要素を完全にクリアするには、それをどのように適応させるべきかについてはあまりよく分かりません。

Answer 1

なぜバインディングを手動で再適用する必要があるのか​​わかりません。観測可能な配列を持つビューモデルの全体のポイントは、ノックアウトがあなたのためのデータ更新を処理するということです...通常、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>