0

我正在尝试在表格中显示我的数据，而不是复选框显示一些花哨的东西，例如 http://www.bootstrap-switch.org/

我已经设法使用此绑定构建表并处理插件

ko.bindingHandlers.bootstrapSwitchOn = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $elem = $(element);
        $(element).bootstrapSwitch();
        $(element).bootstrapSwitch('state', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
        $elem.on('switchChange.bootstrapSwitch', function (e, data) {
            valueAccessor()(data);
            //$(this).trigger('click'); --***--
        }); // Update the model when changed.
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var vStatus = $(element).bootstrapSwitch('state');
        var vmStatus = ko.utils.unwrapObservable(valueAccessor());
        if (vStatus != vmStatus) {
            $(element).bootstrapSwitch('state', vmStatus);
        }
    }
};

我已经展示了数据，但我被困在下一阶段。每次用户单击开关时，我都想调用一个方法来更改数据库中数据的状态。这是我尝试过的

<input type="checkbox" data-on-color="success" data-on-text="on" data-off-text="off" data-off-color="danger" name="switch-checkbox" 
             data-bind="bootstrapSwitchOn: active, click: $root.updateData"></td>

但是永远不会调用该方法。据我了解，这是因为 bootstrap-switch.js 实际上并没有触发它。所以我试着自己做，见—— * ——在自定义绑定中。这导致触发事件 2 次。这是不可接受的。

有没有办法在淘汰赛中调用此方法但不更改 VM？我知道我可以使用 dummyObservable 并在我的绑定中更新它，但是如果我必须更改每个我想使用引导开关的 VM，自定义绑定的意义何在？

基本上我正在尝试制作可重复使用的东西，并陷入淘汰赛部分。

4

1 回答 1

0

我找到了解决我的问题的方法。最后，我采取了另一种方式，直接在绑定中从 VM 调用了我需要的函数

ko.bindingHandlers.bootstrapSwitchOn = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $elem = $(element);
        $elem.bootstrapSwitch();
        $elem.bootstrapSwitch('state', ko.utils.unwrapObservable(valueAccessor().state())); // Set intial state
        $elem.on('switchChange.bootstrapSwitch', function (e, data) {
            var context = ko.contextFor(this);
            context.$root[valueAccessor().fnctn](context.$data);
        });
    }
};

我的 HTML 现在看起来不同了，因为我希望尽可能通用，所以我将参数传递给绑定以知道要调用 VM 的哪个函数。

<input type="checkbox" data-on-color="success" data-on-text="on" data-off-text="off" data-off-color="danger" name="switch-checkbox" 
         data-bind="bootstrapSwitchOn: {state: active, fnctn: 'updateData' }"></td>
于 2014-09-04T12:01:37.543 回答