Wiring Bootstrap-Switch zu knockout Observable

Question

Ich schaue auf dieses Beispiel http://jsfiddle.net/meno/MBLP9/ für die Verkabelung der On-Change-Ereignis eines Bootstrap-Taste. Ich habe Probleme damit, dies mit einem anderen Knockout-Observable zu verbinden.

Ich habe eine beobachtbare

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

, die einen Standardwert auf Last, ich versuche, dies in den Schalter zu verdrahten. Ich verstehe die Syntax in der Geige auch nicht

Wie definieren sie eine : für die Observablen und nicht eine =? Wenn ich versuche, wirft Javascript einen Syntaxfehler.

Ich versuche on mit IsAggregate

Mein Ansichtsmodell zu ersetzen und Bindung

//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

Im Geige Code Letztlich schuf er ein verbindliches Handler für die Bootstrap-Schalter, der die Ko-Update, wenn der Schalter getan: in der init-Funktion

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. 
    }, 

bekommt er die Kontrolle, dass Knoc Kout Eigenschaft ist binded zu und verwendet Jquery-Handler zu setzen Knockout Eigenschaft zu aktualisieren, wenn ‚Schalter-change‘

und wenn es aktualisiert und der neue Wert ist nicht der aktuelle Wert er aktualisiert den 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); 
    } 
} 

für weitere Referenz über die benutzerdefinierte besuchen Sie bitte Bindung: http://knockoutjs.com/documentation/custom-bindings.html

für „:“ Frage, in Ihrem Code definieren Sie Ihr Modell als Funktion so verwenden wir das Symbol „=“ seine Eigenschaften während in der Geige definieren Code, er verwendet Objekt, so dass wir ":" verwenden, um i zu definieren ts Eigenschaften

Answer 2

Ich weiß nicht genau seit welcher Version die oben genannten funktioniert nicht mehr. Ich hatte die akzeptierte Lösung zu modifizieren, es für mich arbeiten zu bekommen und wollte teilen:

/** 
* 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

Es gibt auch einen Handler in der Bootstrap-Schalter Github Seite erwähnte für Knockout. Scheint Bootstrap-Switch-Optionen und Template-Bindungen in sauberen Weise

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);   
    } 
}; 

Höflichkeit zu behandeln: auf @ Peter Antwort, verbesserte noch einmal ...

/** 
* 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); 
     } 
    } 
}; 

Das erste, was knockout-bootstrap-switch

Answer 4

Basierend am auffälligsten ist, gebe ich eine onSwitchChange Funktion als Teil eines options Objekts. Aber, Theres andere kleine Änderungen darüber hinaus ...