JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://raw.github.com/billpull/knockout-bootstrap/master/build/knockout-bootstrap.min.js"></script>
<ul data-bind="foreach: {data: items, as: 'item'}">
    <li>
        <span data-bind="text: item.text"></span>
       (<span data-bind="text: item.status"></span>)
        <i class="icon-cog" data-bind="popover: {template: 'popoverTemplate', trigger: 'click'}"></i>
    </li>
</ul>

<script id="popoverTemplate">
    <h5 data-bind="text: item.text"></h5>
    
    <input type="text" data-bind="value: item.text, valueUpdate: 'afterkeydown'" />
</script>

JavaScript

var SubModel = function () {
    var self = this;
    
    self.text = ko.observable("hello");
    self.status = ko.observable("warning");
};

var ViewModel = function () {
    var self = this;
    
    self.items = ko.observableArray();
    
    for (var i = 0; i < 10; i++){
        self.items.push(new SubModel());  
     }
};

$(function () {
    ko.applyBindings(new ViewModel());
});