JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<center>
  <h2>Popover Demo</h2>
  <div data-bind="template: {name: 'popoverTemplate', foreach: commands}"></div>
</center>

<script type="text/html" id="popoverTemplate">
    <div style="display:none;" data-bind="attr: {'id': $data.command + 'Content'}, template: {name: 'popoverContent', data: $data.content}"></div>    
    <a href="#" class="btn" data-bind='text: $data.command, popover: $data'></a>
</script>

<script type="text/html" id="popoverContent">
    <p>Name: <b data-bind='text: $data.name'></b></p>
    <p>Email: <b data-bind='text: $data.email'></b></p>
</script>

JavaScript

var ViewModel = function() {
    var self = this;
    self.commands = ko.observableArray([
        {command: "Click", title: "Title One", content: {name: 'Ben', email: '[email protected]' }},
        {command: "Hover", title: "Title Two", content: {name: 'Tim', email: '[email protected]' }, placement: "bottom", trigger: "hover"}        
    ]);
}

ko.bindingHandlers.popover = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        if (options) {
            var control = '#' + options.command + 'Content';
            $(element).attr('data-content', $(control).html());
            $(element).attr('data-original-title', options.title || 'Title');
            $(element).attr('data-placement', options.placement || 'right');
            $(element).attr('data-trigger', options.trigger || 'click');
            $(element).popover({html: true});
        }
    }
};

ko.applyBindings(new ViewModel());