Changes to an observable are immediately reflected in the DOM, so when you append the objects to your existing observable, the DOM is “instantly” changed (instantly in quotes because if you have thousands of items, it might take a bit). There isn’t really an event to listen to because as soon as you call
.attr() to update the observable, the DOM changes are made.
Question for you: does your UI lock up, freeze, or become unresponsive when switching tabs? If it doesn’t, then you might not have any issues. You can also measure the time in your code to see how long the updates are taking:
console.time('Observable update');// Start a timer
yourMap.attr('attribute', newData);// Whatever code you have that updates the observable
console.timeEnd('Observable update');// End the timer and display it in your browser’s console
Some more food for thought, if it is slow and causing the UI to freeze:
- Do you need the live binding features? If not, you could create a helper to insert the data into the DOM without using stache.
- Can you batch the observable updates into groups? In other words, when you update the observable, can you first only change a couple hundreds items, then wait for requestAnimationFrame to fire before changing the next couple hundred?