Knockout custom bindings with my custom function

Question

I need to call one external scroll function only when inner div height is greater than outer div height via knockout custom binding handlers.

How can I achieve this with my custom code every time.

Html Code Is:

<div class="ModifiedNotesListSection" style="height:300px;">
   <div class="Innerdiv" data-bind="EnscrollActive:{}">some dynamiic Content</div>
</div>

Knockout binding is:

ko.bindingHandlers.EnscrollActive = {
           init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
               var ActualHeight = $(element).height();
               var ParentHeight = $(element).parents(".ModifiedNotesListSection").height();

                   if (ActualHeight > ParentHeight) {
                       $(element).parents(".ModifiedNotesListSection").enscroll({
                           verticalTrackClass: 'track4',
                           verticalHandleClass: 'handle4',
                           minScrollbarLength: 28
                       });
                   }
           }
       };

Note: Instead of this enscroll method , You can write any JQuery add class method inside my if condition.

You need the custom binding to be executed each time that the height of any of the div elements change, right? — elbecita, Apr 26 '16 at 13:25

score 0 · Answer 1 · edited May 23 '17 at 12:31

In the end you want to track the div elements height change and do some stuff if the height of the inner div is greater than the outer one. The "ugly" part is to be notified each time the div elements height changes, and knockout does not have an out of the box solution for that. :(

You are gonna need to code something to track the height of the DOM element every X time. Check these answers on how to do it: https://stackoverflow.com/a/9628472/4067893

And then, you can either

execute your enscroll fn directly in that code without the need of having a custom knckout binding
or using the custom binding: put the code that checks the height of the div elements inside the custom binding init fn. Or use an observable that changes every time that the height of the div elements changes and send it to the binding (data-bind="EnscrollActive: yourObservable"). In the last case you will need to use update fn of the custom binding.

I hope it helps.

Knockout custom bindings with my custom function

1 Answers1