// Underscore.js implementation
var debounce = function (func, wait, immediate) {
var timeout, result;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) result = func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) result = func.apply(context, args);
return result;
};
};
var vm = function () {
var exports = {},
self = {};
exports.items = ko.observableArray([
"Item1",
"Item2",
"Item3",
"Item4",
"Item5"
]);
exports.afterListRender = (function () {
// Store stack of elements rendered
var elementStack = [];
// Handle after render
var afterRender = debounce(
// function to execute after wait time
function () {
// Debug
console.log("After Render Debounced", elementStack);
// Clear stack
elementStack = [];
},
// wait time in ms
80
);
// Return afterRender handler
return function (elements) {
/// <summary>Called after each item in the list is rendered</summary>
/// <param name="elements" type="Object"></param>
// Get list items only
var listItems = $(elements).filter("li").get();
// Add to stack
ko.utils.arrayPushAll(elementStack, listItems);
// Call debounced callback
afterRender();
};
})();
return exports;
};
ko.applyBindings(vm());
<ul data-bind="foreach: { data: items, afterRender: afterListRender }">
<li><span data-bind="text: $data"></span></li>
</ul>
External resources loaded into this fiddle: