敲除和切換開關 - 數據綁定

Question

我正在從JavaScript切換到淘汰賽。在我的頁面上，我使用了BootStrap切換開關。

http://www.bootstraptoggle.com/

之前，我會成立一個div爲可見基於這樣的開關的值：

if($("#HasPromotion").bootstrapSwitch('state') == false) 
{ 
    $("#promotiondiv").hide(); 
} 

而且我對照定義爲：

@Html.CheckBoxFor(x => x.HasPromotion, new { @class = "toggleswitchcontrol", data_on_text = "Yes", data_off_text = "No" }) 

隨着淘汰賽，我想將數據綁定到我的視圖模型上的屬性。

我想這一點：

<input type="checkbox" class="toggleswitchcontrol" data-on-text="Yes" data-off-text="Nope" data-bind="attr: {state: hasPromotion}" /> 

沒有成功....我不知道要綁定什麼屬性。如何將控件綁定到我的視圖模型中的該屬性？

Answer 1

對不起，你沒有意識到你正在使用一個不同於我評論中的boostrap開關。我更新了小提琴爲boostraptoggle添加自定義綁定。
http://jsfiddle.net/MBLP9/356/

這裏是綁定。

ko.bindingHandlers.bootstrapToggleOn = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     $elem = $(element); 
     $(element).bootstrapToggle(); 
     if (ko.utils.unwrapObservable(valueAccessor())){ 
      $elem.bootstrapToggle('on') 
     }else{ 
      $elem.bootstrapToggle('off') 
     } 

     $elem.change(function() { 
     if ($(this).prop('checked')){ 
      valueAccessor()(true); 
     }else{ 
      valueAccessor()(false); 
     } 
    }) 

    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var vStatus = $(element).prop('checked'); 
     var vmStatus = ko.utils.unwrapObservable(valueAccessor()); 
     if (vStatus != vmStatus) { 
      $(element).bootstrapToggle('toggle') 
     } 
    } 
};