javascript - knockout 和切换开关 - 数据绑定(bind)

Question

我正在从 javascript 切换到 Knockout。在我的页面上，我使用 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" })

通过 knockout ，我想将值数据绑定(bind)到我的 View 模型上的属性。

我正在尝试这个:

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

没有成功......我不确定要绑定(bind)什么属性。如何将控件绑定(bind)到 View 模型中的该属性？

Answer 1

抱歉，没有意识到您使用的升压开关与我评论中的开关不同。我更新了 fiddle 以添加 boostraptoggle 的自定义绑定(bind)。
http://jsfiddle.net/MBLP9/356/

这是绑定(bind)。

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