JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="container" style="width:500px;margin:10px"></div>

<script type="text/ractive" id="template">
	<table width="100%" class="table table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Salary</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        {{#users}}
            <tr>
                <td>{{name}}</td>
                <td>{{age}}</td>
                <td>{{salary}}</td>
                <td>
                    <a href="#" on-click="edit">edit</a>
                </td>
        </tr>
            {{> editTpl}}
        {{/users}}
        </tbody>
    </table>
</script>
<script type="text/ractive" id="editTpl">
    <tr style='display:{{.editing?"":"none"}}'>
        <td><input type="text" value="{{name}}" /></td>
         <td><input type="text" value="{{age}}" /></td>
         <td><input type="text" value="{{salary}}" /></td>
        <td><button class="btn btn-default">update</button>
            <button class="btn btn-default" on-click="cancel">cancel</button>
        </td>
    </tr>
</script>

JavaScript

var ractive = new Ractive({
	el:"container",
	template:"#template",
    data:{users:[{
        name:"Jim",
        age:25,
        salary:2300
    },{
        name:"Lucy",
        age:26,
        salary:4300
    },{
        name:"Lily",
        age:35,
        salary:3900
    }]}
});
ractive.on({
    edit:function(event){
         event.original.preventDefault();
         this.set(event.keypath+".editing",true);
    },
     cancel:function(event){
         this.set(event.keypath+".editing",false);
    }
})