Search code examples
javascriptknockout.jscustom-binding

Knockout : Bindings not applied to a part of a page after creating a custom binding

I have been creating a custom binding on knockout to help me create a cool pagination with a slide effect like the one on bootstrap on the carousel here http://getbootstrap.com/javascript/#carousel

For this I created a custom binding that acts like a foreach but takes 2 other parameters : the number of elements by page and the current page number

It's working for the moment but I have a strange problem : when I use this binding the rest of the page is not bound to my viewmodel anymore.

I've created a plunkr to show you the problem : http://plnkr.co/edit/fCeczqBtYfYdqeLOPKMZ?p=preview

<div class="carousel" data-bind="foreachPaginated:
{
    list:Items,
    numberOfElementsByPage:numberOfElementsByPage,
    currentPageNumber:currentPageNumber
}">
    <div data-bind="text:$data"></div>
</div>

PS : feel free to add suggestion if you think my code could be improved

Thank you for your help!

Solution

  • If you get the "You cannot apply bindings multiple times to the same element." error, probably you should use the "controlsDescendantBindings" option in your custom binding init function as described in the knockout.js documentation:

            ko.bindingHandlers.myBinding = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            // .... some your code
            return { controlsDescendantBindings: true };
        },
        update: .....