Bootstrap-switch wiring for knockout

Question

I am considering this example http://jsfiddle.net/meno/MBLP9/ for connecting to the change event when the download button loads. I am having problems with how to relate this to another observable knockout.

I have an observable

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

What is the default value when booting, I'm trying to connect it to the switch. I also do not understand the syntax in the violin

How do they determine : for observables, and not = ? When I try this Javascript throws a syntax error.

I end up trying to replace on with IsAggregate

My model 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

In the script code, he created a binding handler for the bootstrap switch, which updates the knockout when the switch is executed: 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. }, 

it receives a control in which the knockout property is bound and uses jquery to place a handler to update the knockout property when "change-change"

and if there is an update and the new value is not the current value, it 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 information on custom bindings, please visit: http://knockoutjs.com/documentation/custom-bindings.html

In the question ":" in your code, you defined your model as a function, therefore we use the symbol "=" to determine its properties while in the script code it uses an object, therefore we use ":" to determine its properties

Answer 2

I don’t know for sure which version above it stopped working. I had to change the decision to make it work 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 3

Based on @Peter's answer improved once again ...

 /** * 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) { $elem = $(element); $(element).bootstrapSwitch({ onSwitchChange: function (event, state) { event.preventDefault(); valueAccessor()(state);// Update the model when changed. return; } }); $(element).bootstrapSwitch('state', ko.utils.unwrapObservable(valueAccessor())); // Set intial 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); } } }; 

The first thing that is most noticeable, I pass to the onSwitchChange function as part of the options object. But, other tiny changes beyond this ...

Answer 4

There is also a knockout handler mentioned on the github-bootstrap-switch page. It seems that in a cleaner way you can control bootstrap switching options and template bindings.

 ko.bindingHandlers.bootstrapSwitch = { init: function (element, valueAccessor, allBindingsAccessor) { //initialize bootstrapSwitch $(element).bootstrapSwitch(); // setting initial value $(element).bootstrapSwitch('state', valueAccessor()()); //handle the field changing $(element).on('switchChange.bootstrapSwitch', function (event, state) { var observable = valueAccessor(); observable(state); }); // Adding component options var options = allBindingsAccessor().bootstrapSwitchOptions || {}; for (var property in options) { $(element).bootstrapSwitch(property, ko.utils.unwrapObservable(options[property])); } //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).bootstrapSwitch("destroy"); }); }, //update the control when the view model changes update: function (element, valueAccessor, allBindingsAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); // Adding component options var options = allBindingsAccessor().bootstrapSwitchOptions || {}; for (var property in options) { $(element).bootstrapSwitch(property, ko.utils.unwrapObservable(options[property])); } $(element).bootstrapSwitch("state", value); } }; 

Provided by: knockout-bootstrap-switch