I have implemented the foreach binding in knockout to dynamically populate table rows. The challenge arises when I also use the tipped js library for tooltips on these rows. Unfortunately, there is no direct reference to the row in typescript or typescript d.ts definitions for tipped js. As a workaround, I had to resort to using the following code snippet:
setInterval(function () {
Tipped.create('.tipped'); // create tooltips and listeners
$(".tipped").removeClass("tipped"); // avoid duplication
}, 500);
This code ensures that events are added only once and prevents re-attachment in the future.
The problem lies in the fact that while knockout handles the removal of its own bindings when a row is deleted, tipped does not follow suit. This leads to a memory leak as redundant event listeners accumulate for elements that are no longer present on the page, thus evading garbage collection.
Would creating a custom foreach binding be the solution to properly manage the addition and removal of tipped elements?