Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popover with observable options not updating #44

Closed
dhanlon opened this issue Apr 21, 2016 · 1 comment
Closed

Popover with observable options not updating #44

dhanlon opened this issue Apr 21, 2016 · 1 comment

Comments

@dhanlon
Copy link

dhanlon commented Apr 21, 2016

The documentation mentions the shorthand form data-bind="popover: popoverOptions", where popoverOptions can be an observable holding an object with bootstrap popover options.

I've tried this in your example, both making popoverOptions an observable, and with popoverOptions being an object but the trigger property being an observable. In both cases when the observable is updated the popover behaviour does not change from it's initial state.

Using the below, the popover will appear on a click, but after updating the trigger observable to 'hover' the popover still appears only on a click.

`function PopoverExampleViewModel() {
var self = this;

self.popoverTemplate = ko.observable('firstPopoverTemplate');
self.popoverOptions = { content: 'Hey', trigger: ko.observable('click') };
self.switchTemplates = function() {
    self.popoverTemplate() === 'firstPopoverTemplate' ? self.popoverTemplate('secondPopoverTemplate') : self.popoverTemplate('firstPopoverTemplate');
};

}

        <button class="btn btn-primary" data-bind="popover: popoverOptions">Short hand</button>
        <div class="btn-group form-group" data-toggle="buttons" data-bind="radio: popoverOptions.trigger">
            <label class="btn btn-primary">
                <input type="radio" name="triggerOptions" value="hover" />
                Hover
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="triggerOptions" value="click" />
                Click
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="triggerOptions" value="manual" />
                Manual
            </label>
        </div>`
@faulknercs
Copy link
Owner

Thanks for the report! Due to the trigger implementation at bootstrap side it's impossible to change it after popover is created.
I would recommend to control it on view model level and just render different popovers when you need change trigger type. Please, see this example: https://jsfiddle.net/faulknercs/s51736n2/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants