Question

我正在尝试在表格中显示我的数据，而不是复选框显示某些奇特的东西 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并在我的绑定中更新它但是如果我必须更改我想要使用bootstrap-switch的每个VM，那么自定义绑定有什么意义呢？

基本上我正试图让某些东西可以重复使用，然后卡在淘汰赛中。

Answer 1

我找到了解决问题的方法。最后我走了另一条路，直接在我的bindinng中调用了我需要的功能

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>

如何使用bootstrap-switch.js绑定调用knockout函数？

1 个答案: