Doesn't work within bootstrap tabs + knockout model

[renathy]

It seems that your component doesn't work with knockout properly. If I have wrapper like this:

It doens't work. It shows styled buttons, but 'toggle' part doesn't work. More over this div is part of bootstrap tabs and first this tab is hidden, data into MyModel are loadd only when user is navigating to the tab. So it happens dynamically after document is ready. I guess this causes some problems. I am not sure.

[norris1976]

I agree. I wasn't able to get it working with Knockout either. Styled ok but the switches wouldn't change.

[ghost]

Got the same issue, it does not work in bootstrap tabs

[flth]

it seems not to work in bootstrap tabs, not sure though. It shows correctly for me but it's not included in the form results, when I move it outside the tab it is.

[robross0606]

I am having visual issues with tabs where the size of the switch is only shown properly on the first tab. However, my toggle data appears to be submitted properly.

[davidlfox]

similar issue with knockout, but not related to tabs. problem is with generic binding e.g.

<input type="checkbox" data-toggle="toggle" data-bind="checked: knockoutObservable" />

debugging shows knockoutObservable is true, but the toggle initially renders in the off state.

[pjabbott]

It seems this is an issue with Knockout itself, as checking a checkbox via $element.prop('checked', true) fails to update the observable in the view model, even with a plain old checkbox. I managed a quick and dirty workaround for this:

Toggle.prototype.on = function (silent) {
    if (this.$element.prop('disabled')) return false
    this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle)
    this.$element.prop('checked', true)
    this.$element.triggerHandler('click')   // added by PJA to fix knockout binding
    if (!silent) this.trigger()
}

Toggle.prototype.off = function (silent) {
    if (this.$element.prop('disabled')) return false
    this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off')
    this.$element.prop('checked', false)
    this.$element.triggerHandler('click')   // added by PJA fix knockout binding
    if (!silent) this.trigger()
}

[robross0606]

I am not using Knockout at all but having problems with any toggles which are not on the first tab of a tab set. The height of those tabs ends up being 0px.

[JayVDZ]

Hrm, still not working with Knockout. What a shame, this component looks great!

[TammyD79]

Are there plans to fix this?

[aAXEe]

Hi all, I created a binding for knockout: https://github.com/aAXEe/knockout-bootstrap-toggle

See PR #91.