custom bindings knockout

by Richard Hunter

HTML

<div data-bind="slideVisible: firstName">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label>
<label><input type="text" data-bind="value: firstName" />firstName: </label>
<label><input type="text" data-bind="value: lastName" />lastName: </label>

<h1 data-bind="text: firstName"></h1>

JavaScript

ko.bindingHandlers.slideVisible = {
    update: function(element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        //var valueUnwrapped = ko.unwrap(value);
 
        // Grab some more data from another binding property
        //var duration = allBindings.get('slideDuration');
        //var foo = allBindings.get('foo');
 
        console.log("update: ", value());
    }
};

var viewModel = {
    giftWrap: ko.observable(true),
    firstName : ko.observable("Richard"),
    lastName : ko.observable("Hunter")
};
ko.applyBindings(viewModel);