JSFiddle - React, Tailwind, and code Playground

by bombo

HTML

<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="http://static.marketruler.com/share/jquery/jquery.glow.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<button data-bind="click: reset">reset</button>
<button data-bind="click: add">add</button>

<span>entry count: <span data-bind="text: users().length"></span></span>

<table data-bind="template: {name: 'tplRows', foreach: users, afterAdd: afterAdd, beforeRemove: beforeRemove}"></table>

<div id="debug">
    <h2>Debug: </h2>
    <div id="output" data-bind="html: formatJson(ko.toJSON(viewModel))"></div>
</div>

<script type="text/html" id="tplRows">
    <tr>
        <td>${name}</td>
        <td><button data-bind="click: function(){ viewModel.remove($data); }">remove</button></td>
    </tr>
</script>

CSS

body {font-family: verdana, helvetica; font-size:12px}
table {border-collapse: collapse; }
td {border: 1px solid #ccc; min-width: 25px; text-align:center}
h1 {font-size: 16px; font-weight: bold; margin: 10px 0}
h2 {font-size: 14px; font-weight: bold; margin: 10px 0}

#debug {
    clear: both;
    padding-top: 20px;
}

#debug h2 {
    border-top: 1px dotted #999;
    padding-top: 10px;
    font-family: sans-serif;
}

#output {
    border: 1px solid black;
    margin: 2px;
    padding: 5px;
    background: #ccc;
    font-family: monospace;
}

JavaScript

var count = 0;

var viewModel = {
    users: ko.observableArray([]),
    
    add: function(){
        this.users.push({name: "joe" + (++count)});  
    },
    
    afterAdd: function(element){
        $(element).glow('green', 500, 100);
    },
    
    beforeRemove: function(element){
        $(element).glow('red', 500, 100);
        setTimeout(function() { ko.removeNode(element) }, 500);
    },
    
    remove: function(entry){
        this.users.remove(entry);
    },
  
    reset: function(){
        this.users.removeAll();
    } 
};
    
ko.applyBindings(viewModel);

// formatJson() :: formats and indents JSON string
function formatJson(val) {
    var retval = '';
    var str = val;
    var pos = 0;
    var strLen = str.length;
    var indentStr = '&nbsp;&nbsp;&nbsp;';
    var newLine = '<br />';
    var char = '';
    
    for (var i=0; i<strLen; i++) {
        char = str.substring(i,i+1);
        
        if (char == '}' || char == ']') {
            retval = retval + newLine;
            pos = pos - 1;
            
            for (var j=0; j<pos; j++) {
                retval = retval + indentStr;
            }
        }
        
        if (char == ':') {
            retval = retval + ' ';
        }
        retval = retval + char;    
        if (char == ':') {
            retval = retval + ' ';
        }
        
        if (char == '{' || char == '[' || char == ',') {
            retval = retval + newLine;
            
            if (char == '{' || char == '[') {
                pos = pos + 1;
            }
            
            for (var k=0; k<pos; k++) {
                retval = retval + indentStr;
            }
        }
    }
    
    return retval;
}