Cablaggio dell'interruttore Bootstrap per l'eliminazione del valore osservabile

Question

Sto osservando questo esempio http://jsfiddle.net/meno/MBLP9/ per collegare l'evento on change di un pulsante di bootstrap. Sto avendo difficoltà a seguire come relazionarlo a un altro osservabile a eliminazione diretta.

Ho un osservabile

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

che ha un valore di default del carico, sto provando a collegare questo nell'interruttore. Non capisco anche la sintassi del violino

Come stanno definendo uno : per gli osservabili e non uno =? Quando provo questo Javascript genera un errore di sintassi.

definitiva sto cercando di sostituire on con IsAggregate

mio ViewModel e vincolante

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

Nel codice di violino, ha creato un gestore vincolante per l'interruttore di bootstrap che aggiornano il ko quando l'interruttore è fatto: nella funzione init

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

ottiene il controllo che Knoc Proprietà Kout è binded da e utilizza jQuery per mettere gestore per aggiornare proprietà knockout quando 'switch-cambiamento'

e se v'è l'aggiornamento e il nuovo valore non è il valore corrente che aggiorna il ko

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

per più di riferimento circa il legame si prega di visitare il sito personalizzato: http://knockoutjs.com/documentation/custom-bindings.html

per ":" questione, nel codice si è definito il vostro modello in funzione in modo da utilizzare il simbolo "=" per definire le sue proprietà mentre il violino codice, usa l'oggetto così usiamo ":" per definire i ts properties

Answer 2

Non so esattamente da quando la versione precedente ha smesso di funzionare. Ho dovuto modificare la soluzione accettata per farlo funzionare per me e ha voluto condividere:

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

C'è anche un gestore per ko accennato nella pagina github bootstrap-switch. sembra gestire le opzioni di commutazione di bootstrap e attacchi template in modo più pulito

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

Cortesia: knockout-bootstrap-switch

Answer 4

Sulla base @ risposta di Pietro, migliorato ancora una volta ...

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

La prima cosa il più evidente è che passo in una funzione onSwitchChange come parte di un oggetto options. Ma ci sono altre piccole modifiche oltre ...