Question

I’m building a “WebApp” for iPad using Knockout.js and CSS3 Animations.

The transition between different pages is animated. I want to get a JavaScript callback when the Animation ends.

Now i know you can catch the callback using Javascript like this:

element.addEventListener(webkitAnimationEnd, function(){callfunction()},false);

But isn’t there a better way to do this? The “knockout way”? I want to bind the callback function using the data-bind attribute in the DOM rather than accessing the DOM element in my javascript code!

Any ideas?

EDIT: Maybe i should add that i’m new to Knockout.js and i don’t know if what i’m trying to do or rather, how i’m trying to do it makes sense or if you just do it the conventional way!

Answer 1

From my experience there is no ‘knockout way’ to handle those sorts of events.

Knockout’s author suggests using the KO event binding for simple bindings. But for more complex and/or unobtrusive event binding scenarios suggests using jQuery: http://knockoutjs.com/documentation/unobtrusive-event-handling.html

I’m working on a project now using Knockout and I followed his suggestion. Using some KO event bindings (for form submits) and some jQuery event bindings (for a window resize event in my case).

Of course, you don’t need to use jQuery, but going outside the KO library in your case is probably the correct route. Have fun!