JSFiddle - React, Tailwind, and code Playground

by mounir

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>
     <ul data-bind="foreach: persons">
         <li>
             <span data-bind="text: 'name : '+name()+' email : '+ email()">
             </span>
             <a href="#" data-bind="popover: {content :'#popover_content',id: id}" data-title="<strong>Person details</strong>" data-placement="bottom"> Edit
          </a>
         </li>     
     </ul>         
     
<script id="popover_content" type="text/html">
<div class="row-fluid" >
  Name :
  <input type="text" data-bind="value: name,valueUpdate: 'afterkeydown'" />
    Email :
  <input type="text" data-bind="value: email,valueUpdate: 'afterkeydown'" />
</div>
<br>
<div class="row-fluid">
  <center>
    <div class="span3 offset1">
      <button class="btn btn-small btn-danger" data-bind="click: $root.closePopover">Close</button>
    </div>
  </center>
</div>
</script>

JavaScript

var ViewModel = function() {
    var self = this;
    self.persons = ko.observableArray([
        {id: '1', name: ko.observable('Mounir'), email: ko.observable('[email protected]') },
        {id: '2', name: ko.observable('Sam'), email: ko.observable('[email protected]') }        
    ]);
    self.closePopover = function(person){
        $('#popover'+person.id+"_click").popover("hide");
    };
}

ko.bindingHandlers.popover = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var attribute = ko.utils.unwrapObservable(valueAccessor());
        var cssSelectorForPopoverTemplate = attribute.content;
        var popOverTemplate = "<div id='"+attribute.id+"-popover'>" + $(cssSelectorForPopoverTemplate).html() + "</div>";
        $(element).popover({
            content: popOverTemplate,
            html: true,
            trigger: 'manual'
        });
        $(element).attr('id', "popover"+attribute.id+"_click");
        $(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
        });
    },
};
ko.applyBindings(new ViewModel());