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，我想将值数据绑定到我的viewmodel上的属性。

我正在尝试这个：

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

Knockout和一个切换开关 - 数据绑定

1 个答案: