Knockoutjs foreach custom bindinghandler with afterAdd

Question

I would like to build a custom bindingHandler

ko.bindingHandlers.foreachWithHighlight that has an highlight effect when afterAdd.

From documentation

<         


        

Answer 1

I've modified one of the knockout tutorials, it doesn't use a custom binding though but still drives the behaviour via beforeRemove and afterAdd which hook into the observableArray.

data-bind='template: { 
    foreach: planetsToShow,
    beforeRemove: hidePlanetElement,
    afterAdd: showPlanetElement 
}'

Depending on compatibility you could use css3 transitions as I've done here to give the newly added element a yellow colour that transitions to the normal one after a given timing. (Although the timings and colourings I used need work ;))

In this fiddle it seems to be working by not applying to the original list, but I guess this might be down to at what stage the observableArray gets modified?

http://jsfiddle.net/8k8V5/1529/