Knockout JS event for any viewmodel dom update

Question

I need to run a jquery ui bit of code whenever the DOM is updated via Knockout.JS. I realize this can be done using custom bindings, but that appears to be related to a specific viewmodel, I want to do it globally so whenever it happens on any viewmodel it fires?

Lets say I ALWAYS want a JQuery datepicker on all textboxes with class 'needsdate', rather than add this to each of my view models, it would be great if I could do it globally.

Is this possible?

Can you explain your scenario a bit more? Typically, you would use a custom binding that is bound against an observable. When that observable changes, then the binding would run whatever jQuery UI code is necessary against the element that the bindings lives on. There is potentially a way to do what you are asking, but I would want to hear more about the use case before suggesting it, as it is not the normal way to go. — RP Niemeyer, Feb 08 '12 at 03:01
updated my main post: Lets say I always want a JQuery datepicker on all textboxes with class 'needsdate', rather than add this to each of my view models, it would be great if I could do it globally. Does that help? — RodH257, Feb 08 '12 at 07:19
If you are not binding to a viewmodel, then probably you don't need knockout for this. — Alexander Taran, Feb 08 '12 at 07:25
I'm fairly sure I have the same situation, Knockout removes JQuery handles as it refreshes the UI so it's not easy to stop them from stepping on eachothers toes. The common suggested solution is to use the `$.on()` method on mouseover to reapply behaviors but this doesn't work with droppable for example (hover not counted as you're dragging an element in between). The alternate is to create a binding handler, which applies JQuery whenever the binding is updated but this isn't always applicable for template bindings for example where any element in the template could be applicable to JQuery — Dead.Rabit, Jun 11 '13 at 11:22

score 7 · Accepted Answer · edited May 23 '17 at 12:16

If you are not going to be dynamically adding/removing elements, then you could just wire them up as normal. However, if you are working with dynamic content (like using an observableArray that is having its items modified), then you have a couple of options:

1- Like the answer here, you can create a custom binding. If you don't want to bind the value to a property on your view model, then you can simplify the binding to something like:

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor) {
        //initialize datepicker with some optional options
        var options = ko.utils.unwrapObservable(valueAccessor());
        $(element).datepicker(options);

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).datepicker("destroy");
        });
    }
};

You would place it on an element like:

<input data-bind="datepicker: { minDate: new Date() }" />

2- the other option is to use the afterRender functionality of the template (and foreach which uses template) to wire up your datepickers after new content is rendered.

score 0 · Answer 2 · answered Jun 11 '13 at 11:50

I've created a refreshJQuery() function that applies all my beefy behaviors in one go. I then call this function when I subscribe to observables in my view model to update my model. And once on page load.

function refreshJQuery() {
    $(".draggable, .droppable, .resizable").each(function () {

        var $element = $(this);

        if ($element.hasClass("draggable") && !$element.data("init-draggable")) {
            $element.data("init-draggable", true).draggable(dragBehavior);
        }
        if ($element.hasClass("droppable") && !$element.data("init-droppable")) {
            $element.data("init-droppable", true).droppable(dropBehavior);
        }
        if ($element.hasClass("resizable") && !$element.data("init-resizable")) {
            $element.data("init-resizable", true).resizable(resizeBehavior);
            $(this).children().fadeTo(2000, 0);
            $element.hover(function () {
                $(this).children().fadeTo(200, 1);
            },
            function () {
                $(this).children().fadeTo(750, 0);
            });
        }
    });
};

I then use it as follows, though I've identified 2 other observables I need to call this function from also:

this.updateTime = function () {
    service.updateBookingTimes(this.id(), this.startDate(), this.endDate());
    refreshJQuery();
};

this.startDate.subscribe(this.updateTime, this);
this.endDate.subscribe(this.updateTime, this);

I've also implemented @RPNiemeyer's solution for field level JQuery subscriptions, so in addition to his sample for a datepicker, I have similar code which reapplies $.button() to <a> tags and another which converts checkboxes into iPhone style switches.

Knockout JS event for any viewmodel dom update

2 Answers2