Bootstrap Switch with custom MVVM binding

2 posts, 0 answers
  1. Erik
    Erik avatar
    52 posts
    Member since:
    Jan 2011

    Posted 11 Jan 2017 Link to this post

    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:

    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: ={
        init: function (element, bindings, options) {
            var x = this;
  , element, bindings, options);
            var that = this;
                function(event, state) {
        refresh: function() {
            var that = this;
            var value = that.bindings["bootstrapSwitch"].get();
            $(that.element).bootstrapSwitch("state", value);
        change: function () {
            if ( && && {
                var changeBinding =;
                for (var i = 0; i < changeBinding.parents.length; i++) {
                    var parentObservable = changeBinding.parents[i];
                    var method = changeBinding.path;               
            var value = this.element.value === "on";

    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 -


    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.












  2. Stefan
    Stefan avatar
    3011 posts

    Posted 13 Jan 2017 Link to this post

    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:

    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:

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top