CODEWITHSUNDEEP
jqueryknockout.js
jonnow
jonnow

Reputation: 858

Call a jQuery function after Knockout.js has loaded content

I have some content that is getting loaded from knockout.js:

<div class="knockout-text">
    <label data-bind="html: myText"></label>
</div>

I would like to added bit of jQuery to check the height of this label and if it is over 100px add a read more toggle.

My issue is that I can't seem to just add a snippet of script at the bottom of the page as it will be called before the Knockout stuff has been invoked.

Can anyone tell me how to call this snippet of jQuery AFTER knockout has loaded the content please.

(Please note I have no experience with knockout.js, someone else coded this originally and I'm trying to add more functionality)

Many thanks!

Upvotes: 1

Views: 4768

Answers (1)

pax162
pax162

Reputation: 4735

Probably the easiest way is to create a custom binding (http://jsfiddle.net/C66ab/1/, check the console)

html:

<div class="knockout-text">
    <label data-bind="html: myText, detectHeight:{}"></label>
</div>

js:

var VM = function(){
    var self = this;
    self.myText = "lorem lorem...<br/>asdad";
}


    ko.bindingHandlers.detectHeight = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            console.log($(element).css("height"))
        }
    };

    ko.applyBindings(new VM());

Upvotes: 5

Related Questions