CODEWITHSUNDEEP
javascriptknockout.js
GiCo
GiCo

Reputation: 586

Change another binding out of a custom bindingHandler

How can I change out of a custom bindingHandler(fadeVisible) the value of another binding (isFadingIn). Best explained with an example. 

<div data-binding="fadeVisible: isVisible; fadingIn: isFadingIn; animationDuration: 500">...</div>


ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // Initially set the element to be instantly visible/hidden depending on the value
        var value = valueAccessor();
        $(element).toggle(ko.unwrap(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // Whenever the value subsequently changes, slowly fade the element in or out

        var duration = allBindings.get('animationDuration') || 400;
        //vvvvvvvvv here
        allBindings.get('fadingIn') = true;

        var value = valueAccessor();
        ko.unwrap(value) ? $(element).fadeIn(duration).then(function () {
           //vvvvvvvvv here
           allBindings.get('fadingIn') = false;
        }) : $(element).fadeOut(duration).then(function () {
           //vvvvvvvvv here
           allBindings.get('fadingIn') = false;
        });
    }
};

Edit: changed Parameters

(element, valueAccessor)

to

(element, valueAccessor, allBindings, viewModel, bindingContext)

Upvotes: 0

Views: 28

Answers (1)

manji
manji

Reputation: 47978

allBindings argument is missing from the function signature. allBindings.getwill return an observable, so you should set it like an observable:

allBindings.get('fadingIn')(true);
allBindings.get('fadingIn')(false);

Upvotes: 1

Related Questions