Executing a Knockout.js destructive loop in a foreach fashion

Question

Executing a Knockout.js destructive loop in a foreach fashion

Here is the HTML code with the data-bind elements:

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>

This is how I am passing an array called requestsArray to the data-bind loop:

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

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

Through different AJAX calls, various requestArrays are returned. After the initial page load, an AJAX call fetches one instance of the requestArray which might contain 10 items. The foreach loop works as expected, and all 10 items are displayed on the page. However, in a second AJAX call, the array may only have 5 items. This causes each item to be repeated twice, resulting in a total of 10 items being displayed on the page.

The issue arises from the fact that even though

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

is invoked before:

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

with each new array, the number of HTML elements created by each iteration of foreach continues to increase. In Vue.js, passing a new array for data-binding and looping is destructive and does not retain any elements from the previous iteration over the array.

Using ko.cleanNode does not resolve this scenario, and while there is an example in the documentation that demonstrates what seems to be the correct procedure, it only removes one HTML element at a time using a button and self.array.remove(this). Adapting this to completely clear out all HTML elements created from a foreach iteration is not straightforward.

javascript arrays knockout.js

Answer 1

Answer №1

There is no need to manually re-apply bindings when you have a view model with an observable array. Knockout handles the data updates automatically for you. Typically, using cleanNode may not be necessary if there are simpler alternatives available.

Consider trying something like this:

// 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>

Answer 2

There is no need to manually re-apply bindings when you have a view model with an observable array. Knockout handles the data updates automatically for you. Typically, using cleanNode may not be necessary if there are simpler alternatives available.

Consider trying something like this:

// 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>

Executing a Knockout.js destructive loop in a foreach fashion

Answer №1

Similar questions

Troubleshooting issue: Angular Typescript object array filter functionality malfunctioning

Filling an array in the programming language C

Click the submit button to display a div element without having to refresh the page

What is the extent of a variable within a jQuery function?

You cannot call this expression. The type 'String' does not have any call signatures. Error ts(2349)

save choice in antd select in react js

What is the best way to send a response with multiple parts in ExpressJS?

Guide on preventing selection with beforeSelectionChange when using the select All checkbox in ng-grid

Manipulating geometry properties in three.js with dat.GUI for dynamic changes

Efficient search operations in a 2D matrix in C++

Utilizing JavaScript as the front-end client for a web application connected to the backend of

Is there a way to insert values into dynamic arrays of arrays and remove them in C++?

Is it possible to integrate the screenfull JavaScript library into the Next.js framework?

Can you tell me the appropriate type for handling file input events?

How can I efficiently create a suffix using this JavaScript code?

Validating groups of fields using Angular fieldsets

Ways to maintain hover functionality when the submenu is visible

I am currently facing an issue with retrieving the class value that is being generated by PHP code

Django inline formset posing challenges with deletion of forms

Filtering an array dynamically by utilizing an array of conditions