KO Bootstrap Popover

by Jorge Bustos Pereda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<input type="password"  
       data-bind="popover: 
                  [{visible: triggerA, placement: 'right', template: 'A'},
                  {visible: triggerB, placement: 'right', template: 'B'}]"/>

<script type="text/html" id="A">
    This is popover <b>A</b>
</script>
<script type="text/html" id="B">
    This is popover <b>B</b>
</script>
<br/>
<label>Trigger A<input type="checkbox" name="triggers" data-bind="checked: triggerA"></label>
<label>Trigger B<input type="checkbox" name="triggers" data-bind="checked: triggerB"></label>

JavaScript

ko.bindingHandlers.popover = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
		var values = ko.unwrap(valueAccessor());
        values.forEach(function(value) { value.visible(); });
        debugger;
        var visibleValue = values.find(function(value) { return value.visible();});
        
        if (visibleValue) {
            $(element).popover('destroy');
            $(element).popover({
                html: true,
                content:  $('#' + ko.unwrap(visibleValue.template)).html(),
                placement: ko.unwrap(visibleValue.placement),
                container: 'body'
            });
            $(element).popover('show');
            var popover = $("body .popover").last().get(0);
            ko.cleanNode(popover);
            ko.applyBindings(bindingContext.$rawData, popover);
        } else {
            $(element).popover('hide');
        };
    }
};

var vm = {
    triggerA: ko.observable(),
    triggerB: ko.observable()
}

ko.applyBindings(vm);