I'm fairly new to Knockout and I am trying to use a jquery plugin which applies custom styling to certain elements. But since I have a page that gets the content from the ajax call and all the elements are build on the fly by knockout the initial jquery function call has no idea that there are any elements on the page, so no styling is applied on those elements.

So what I'm asking is how do I callback a jquery function after knockout is done manipulating the elements (DOM)?

Right now I'm calling jquery function as following:-

$(document).on("load",function(){
    $(".element").callPlugin("add-style");
});

I'm fairly new to Knockout and I am trying to use a jquery plugin which applies custom styling to certain elements. But since I have a page that gets the content from the ajax call and all the elements are build on the fly by knockout the initial jquery function call has no idea that there are any elements on the page, so no styling is applied on those elements.

So what I'm asking is how do I callback a jquery function after knockout is done manipulating the elements (DOM)?

Right now I'm calling jquery function as following:-

$(document).on("load",function(){
    $(".element").callPlugin("add-style");
});

• javascript
• jquery
• dom
• knockout.js

Share Improve this question Follow asked Jul 6, 2013 at 16:59 shriekshriek 5,85388 gold badges5252 silver badges8383 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

applyBindings is synchronous, so you could call callPlugin after ko.applyBindings(VM) (in the next line).

ko.applyBindings(VM);
 $(".element").callPlugin("add-style");

Or, you could use custom bindings if you're updating your UI multiple times. Assuming .element is an <div> (It could also be anything else), your tag would look like this :

<div class="element" data-bind="text: 'This is just some text which KO will bind',
                                updateUI: true">
This text will change. Wait for it..
</div>

Notice the updateUI in data-bind. This is the corresponding JS code for it :

ko.bindingHandlers.updateUI = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){          
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        $(".element").callPlugin("add-style");
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
        $(".element").callPlugin("update-style"); // just saying
    }
};

This will make your plugin initialise and update automatically when any changes are done to the DOM.

Hope this helps!

I remend doing this through a custom binding: That way your "external code" can be more integrated with your data binding. You will also have support for updating if necessary.

Read more about the concept here http://knockoutjs./documentation/custom-bindings.html