Run custom Javascript (jQuery) when KO finish binding

[vuquangchien]

Hi guys, I'm using KO for my capstone project and I'm really loving
it. However, I encountered a small problem
That is I really want to fire an custom Javascript function when KO
finish binding, is it possible?
For example I have this template which renders a list of image on my
page

<script id="pictureTemplate" type="text/html">
<img data-bind="attr: {src: link, behaviour: shrinkBehaviour}" ></
img>
</script>

With src is bound to the image source, and behaviour is bound to a
specific behaviour such as: shrinkBigger, shrinkSmaller, etc
Well what I really want is when KO finishes the binding, an custom
Javascript will be applied on that Image. In this case: changes the
picture's size as soon as it the picture is rendered
I just wonder is there an easy way to work it out
Thank you!

[Stacey Thornton]

You can accomplish this in a few ways.

First, you can use the "afterRender" feature of the template binding,
as seen here.

http://knockoutjs.com/documentation/template-binding.html (Note 4)

<div data-bind='template: { name: "personTemplate",
data: myData,
afterRender: myPostProcessingLogic }'> </
div>

viewModel.myPostProcessingLogic = function(elements) {
// "elements" is an array of DOM nodes just rendered by the
template
// You can add custom post-processing logic here
}

It can bind to any javascript function that is part of the model it
bound to. So you can put your logic there, or put code to call your
logic in there.

Another way to do it would be to just nest the function into the
binding. As far as I am aware, you can do this almost anywhere..

ko.applyBindings(viewModel, function() {
// more javascript
});

Maybe I am thinking of jQuery exclusively... but basically you can
append a callback/after-run to pretty much anything. I've used it
thousands of times, but most of them have been in the context of
jQuery, so not sure how that'll work out for you. Worst case scenario
is that you can wrap your binding like this.

(function(binding, $) {
binding();
var fixImage = function(image) {
// fix your image logic here;
};
})(ko.applyBindings(viewModel), jQuery);

This code won't run, so you need to experiment more. I'm new to
closures in general, but the idea is to make a small self-calling
function that is wrapped inside of a function, so you can pass
ko.applyBindings(viewModel) as a function into it and it'll be the
first thing run, then it can run whatever else you have in there.

[Stacey Thornton]

I am also very certain you can call the "afterRender" functionality
from outside of your HTML, but I do not know the syntax for this. If
someone can provide that it would be helpful.

[rpn]

Hello-

As Stacey said, you can use the afterRender or afterAdd callbacks of the template binding described here.

Otherwise, something that is really easy to do is to create a custom binding that is just a wrapper to an existing binding.

It could look like:

ko.bindingHandlers.attrWithYourAction = {
    update: function(element, valueAccessor, allBindingAccessor, viewModel) {
         ko.bindingHandlers.attr.update(element, valueAccessor, allBindingAccessor, viewModel);
         //do something with the element here
    }
};

Then, just use this binding instead of attr.  You could even make it more generic where you pass in the action in the binding.

[Stacey Thornton]

Also, take a look at this .

http://joel.net/wordpress/index.php/2011/06/unobtrusive-data-binding-for-knockout-js/

Using this method, you can do your binding in your javascript instead
of your HTML. very useful if you're like me and using MVC helpers or
don't have total control of your html code.

So what you're wanting to do has a lot of different solutions, and all
of them are really good. It just goes to show you how awesome this
framework is and how well thought out it was. I'd almost go so far as
to say it's as powerful as jQuery itself.

[vuquangchien]

Yes, this worked like a charm, thanks you all for your answers :)

On Jun 15, 10:58 pm, Stacey Thornton <stacey.cielia.l...@gmail.com>
wrote:

> Also, take a look at this .
>

> http://joel.net/wordpress/index.php/2011/06/unobtrusive-data-binding-...