JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .edit{
            background: url("http://www.vospascal.nl/json/edit-icon.png") no-repeat;
            height: 16px;
            width: 16px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <table class="table table-striped table-condensed">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Edit</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>Birthday</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: people">
            <tr>
                <td data-bind="text: id"></td>
                <td> <a class="edit" href="#"></a></td>
                <td data-bind="text: name"></td>
                <td data-bind="text: phone"></td>
                <td data-bind="text: email"></td>
                <td data-bind="text: birthday"></td>
                <td><a class="modal-link" data-bind="attr: { 'data-controls-modal': 'modal'+id }" href="#" data-controls-modal="event-modal" data-backdrop="true" data-keyboard="true">Friends</a></td>
            </tr>
            </tbody>
        </table>
        <div data-bind="foreach: people">
            <div class="modal show fade" data-bind="attr: { id: 'modal'+id }" id="">
           ...

JavaScript

$(window).load(function(){
    var groupPeople = {
        people: ko.observableArray([
            {
                "id": 1,
                "name": "Els Ijdema",
                "phone": "+70957783354",
                "email": "[email protected]",
                "birthday": "Fri, 25 Apr 1975 19:14:24 GMT",
                "friends": [
                    {
                        "id": 1,
                        "name": "Jan Zoetemelk",
                        "phone": "+70950986056"
                    },
                    {
                        "id": 2,
                        "name": "Dries Stokvis",
                        "phone": "+70952471328"
                    },
                    {
                        "id": 3,
                        "name": "Maartje Quakkelaar",
                        "phone": "+70953185113"
                    }
                ]
            },
            {
                "id": 2,
                "name": "Mark Klinkhamer",
                "phone": "+70956869795",
                "email": "[email protected]",
                "birthday": "Sun, 07 Jan 2007 05:01:11 GMT",
                "friends": [
                    {
                        "id": 1,
                        "name": "Jerko Eenema",
                        "phone": "+70954351152"
                    },
                    {
                        "id": 2,
                        "name": "Barry Schatteman",
                        "phone": "+70956835521"
                    },
                    {
                        "id": 3,
                        "name": "Marion de Boer",
                        "phone": "+70952491397"
                    }
                ]
            },
            {
                "id": 3,
                "name": "Elco Frederiksen",
                "phone": "+70951605453",
                "email": "[email protected]",
                "birthday": "Tue, 10 Aug 2004 05:45:33 GMT",
                "friends": [
   ...