Wiring Bootstrap-switch to knockout observable

Question

I am looking at this example http://jsfiddle.net/meno/MBLP9/ for wiring up the on change event of a bootstrap button. I am having trouble following how to relate this to another knockout observable.

I have an observable

self.IsAggregate = ko.observable(modeldata.SelectedItem.Aggregate);

Which has a default value on load, I am trying to wire this into the switch. I do not understand the syntax in the fiddle as well

How are they defining a : for the observables and not an =? When I try this Javascript throws a syntax error.

Ultimately I am trying to replace on with IsAggregate

My viewmodel and binding

//Registering switches
$("[name='toggleCatalog']").bootstrapSwitch();
    $("[name='toggleAggregate']").bootstrapSwitch();
var ViewModel = function(modeldata) {
        var self = this;
        self.on = ko.observable(true),
        self.SelectedCatalog = ko.observable(modeldata.SelectedCatalog);
        self.IsAggregate = ko.observable(modeldata.SelectedItem.Aggregate);
        self.IsEnabled = ko.observable(modeldata.SelectedItem.Enabled);
        self.CatalogConfiguration = ko.observableArray([]);
        self.ColumnDropdown = ko.observableArray([]);
        };

$(document).ready(function () {
        var model = new ViewModel(modeldata);
};

Answer 1

I don't know exactly since which version the above stopped working. I had to modify the accepted solution to get it working for me and wanted to share:

/**
 * Knockout binding handler for bootstrapSwitch indicating the status
 * of the switch (on/off): https://github.com/nostalgiaz/bootstrap-switch
 */
ko.bindingHandlers.bootstrapSwitchOn = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var $elem = $(element);
        $elem.bootstrapSwitch();
        $elem.bootstrapSwitch('state', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
        $elem.on('switchChange.bootstrapSwitch', function (event, state) {
            valueAccessor()(state);
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var vStatus = $(element).bootstrapSwitch('state');
        var vmStatus = ko.utils.unwrapObservable(valueAccessor());
        if (vStatus != vmStatus) {
            $(element).bootstrapSwitch('state', vmStatus);
        }
    }
};

Answer 2

In the fiddle code , he created a binding handler for the bootstrap switch which update the knockout when the switch is done: in the init function

init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var $elem = $(element);
        $elem.bootstrapSwitch();
        $elem.bootstrapSwitch('setState', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
        $elem.on('switch-change', function (e, data) {
            valueAccessor()(data.value);
        }); // Update the model when changed.
    },

he gets the control that knockout property is binded to and uses jquery to to put handler to update knockout property when 'switch-change'

and if there is update and the new value is not the current value he updates the knockout

update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var vStatus = $(element).bootstrapSwitch('state');
    var vmStatus = ko.utils.unwrapObservable(valueAccessor());
    if (vStatus != vmStatus) {
        $(element).bootstrapSwitch('setState', vmStatus);
    }
}

for more reference about the custom binding please visit: http://knockoutjs.com/documentation/custom-bindings.html

For ":" question , in your code you defined your model as a function so we use the symbol "=" to define its properties while in the fiddle code , he use object so we use ":" to define its properties