Twitter Bootstrap Popover with Knockout template example

A small example how you can get observables into you popover, and even change value on them from within the popver

by Keyur Patel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<div class="example-container">
    <!-- This span is the element that I want to have a data-bound popover from the template with css selector editTemplate  -->
    <span data-placement="bottom" data-title="write new text to update" data-bind="popover: '#editTemplate', text:exampleText"></span>
</div>


<!-- This is the popover template  -->
<script type="html/text" id="editTemplate">
  <input class="input-small" data-bind="value: $data.exampleText, valueUpdate: 'afterkeydown'" type="text" />
</script >

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.example-container{
    margin-top: 10px;
    margin-left: 300px;
    font-size:24px;
}

JavaScript

var ViewModel = function() {
    this.exampleText = ko.observable("Click me!");
};


ko.bindingHandlers.popover = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var cssSelectorForPopoverTemplate = ko.utils.unwrapObservable(valueAccessor());
        var popOverTemplate = "<div id='my-knockout-popver'>" + $(cssSelectorForPopoverTemplate).html() + "</div>";
        $(element).popover({
            content: popOverTemplate,
            html: true,
            trigger: 'manual'
        });

        $(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById("my-knockout-popver");
            ko.applyBindings(viewModel, thePopover);
        });
    },
};

ko.applyBindings(new ViewModel());