Kablolama Bootstrap anahtarını devre dışı bırakmak için gözle görülür

Question

Bir bootstrap düğmesinin açık değişiklik olayını kablolamak için bu örnekte http://jsfiddle.net/meno/MBLP9/'a bakıyorum. Bunu gözlemlenebilir başka bir nakavt ile ilişkilendirmek için sorun yaşıyorum.

Ben yük varsayılan bir değere sahip bir gözlemlenebilir

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

, ben anahtarı içine bu tel çalışıyorum var.

Gözlemciler için bir sözdizimini anlamıyorum, = değil, gözlenebilirler için nasıl tanımlanıyor? Bu Javascript'i denediğimde bir sözdizimi hatası atar.

Sonuçta ben IsAggregate

benim ViewModel ile on değiştirmeye çalışırken ve keman kodunda

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

bağlayıcı ediyorum, o anahtarıdır güncelleme nakavt önyükleme anahtarı için bağlayıcı bir işleyici yarattı done: init fonksiyonu

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

yılında o gücünü knoc o alır kout özelliği binded ve 'anahtar-değişim'

zaman nakavt özelliğini güncellemek için işleyici koymak için jquery kullanan ve orada güncelleme ve yeni değer o nakavt

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

günceller geçerli değer değilse için http://knockoutjs.com/documentation/custom-bindings.html

: ziyaret ediniz özel bağlama hakkında daha fazla referans için

":" sorusu, kodunuzda bir fonksiyonu olarak modeliniz bu yüzden keman iken özellikleri tanımlamak için "=" sembolü kullanmak tanımlanmış kod, o nesneyi kullanır, böylece ben tanımlamak için ":" kullanırız ts properties

Answer 2

Tam olarak hangi sürümün çalışmayı durdurduğunu bilmiyorum. Benim için çalışmaya başlasın kabul çözümü değiştirmek zorunda kaldı ve paylaşmak istedim:

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

da önyükleme anahtarı github sayfasında belirtilen nakavt için bir işleyici vardır. yine geliştirilmiş @ Peter cevap dayanarak knockout-bootstrap-switch

Answer 4

...

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

ilk şey: temizleyici şekilde

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

Nezaket içinde önyükleme anahtarı seçeneklerini ve şablon bağlamaları işlemek gibi görünüyor En dikkat çekici, bir onSwitchChange işlevinde bir options nesnesinin bir parçası olarak geçer. Ancak, bunun ötesinde diğer küçük düzenlemeler var ...