If I understand your scenario correctly, then the issue is that the initial time that you populate your observableArray (after binding) you see your highlight. One way to handle a scenario like this would be to use ko.utils.domData
or $.data
to put a flag on the element to indicate that it is now ready for the highlight effect.
Something like:
ko.bindingHandlers.foreachWithHighlight = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, context);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
var value = ko.unwrap(valueAccessor()),
key = "forEachWithHightlight_initialized";
var newValue = function () {
return {
data: value,
afterAdd: function (el, index, data) {
if (ko.utils.domData.get(element, key)) {
$(el).filter("li")
.animate({
backgroundColor: 'yellow'
}, 200)
.animate({
backgroundColor: 'white'
}, 800);
}
}
};
};
ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, context);
//if we have not previously marked this as initialized and there are currently items in the array, then cache on the element that it has been initialized
if (!ko.utils.domData.get(element, key) && value.length) {
ko.utils.domData.set(element, key, true);
}
return { controlsDescendantBindings: true };
}
};
Fiddle here: http://jsfiddle.net/rniemeyer/zGJX3/