[Solved] Bootstrap Switch with custom MVVM binding

[Erik]

I'm trying to include a Bootstrap-Switch control (or anything similar).  I've got a regular ASP.NET MVC site, with a TypeScript MVVM view model.

 

I've included the bootstrap switch from here:

https://github.com/nostalgiaz/bootstrap-switch

If you know of an easier way to accomplish the same thing, I'm definitely open to that.

<input type="checkbox" data-bind="bootstrapSwitch: billingSettings.capsIncludeFees, events: {change: cpChanged}"/>

Here's my markup in the view:

And then I have the following custom binding:

kendo.data.binders.bootstrapSwitch = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        var x = this;
        kendo.data.Binder.fn.init.call(this, element, bindings, options);
        var that = this;
        $(that.element).bootstrapSwitch();
        $(that.element).on('switchChange.bootstrapSwitch',
            function(event, state) {
                that.change();
            });
    },
    refresh: function() {
        var that = this;
        var value = that.bindings["bootstrapSwitch"].get();
        $(that.element).bootstrapSwitch("state", value);
    },
    change: function () {
        if (this.bindings.events && this.bindings.events.change && this.bindings.events.change.parents) {
            var changeBinding = this.bindings.events.change;
            for (var i = 0; i < changeBinding.parents.length; i++) {
                var parentObservable = changeBinding.parents[i];
                var method = changeBinding.path;
                //parentObservable[method]();
            }
        }

        var value = this.element.value === "on";
        this.bindings["bootstrapSwitch"].set(value);
    }
});

But the custom binding doesn't actually change the property on my viewModel itself -- or fire the change event.  I hit the breakpoints in my custom binding and can see that the "parents" within the bindings have the stuff I need, but not the "this" object itself. 

If you have a better way to do what I'm after, let me know.  Otherwise, can you help me figure out what is wrong with my custom binding?

Thanks in advance -

Erik

ps I tried setting up a snippet in the dojo for this, but couldn't figure out how to properly include bootstrap and the bootstrap switch.  I can create a sample project on github if it becomes required.

 

 

 

 

 

 

 

 

 

 

 

[Stefan]

Hello Erik,

After inspecting the example I noticed that if the same logic is used on a regular input, not the Bootstrap Switch the value in the model should be updated:

http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom#two-way-custom-bindings

As the application is using a third-party tool and a custom binding, the issue may be coming from the Switch.

If you need additional assistance with the custom implementation, I can suggest our Progress Professional Services team. They can provide assistance and expert solutions for different custom implementations:

https://www.progress.com/services/outsourcing/feature-customization

Regards,
Stefan
Telerik by Progress