JSFiddle - React, Tailwind, and code Playground

by kwon

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script src="http://documentcloud.github.com/backbone/examples/backbone-localstorage.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="https://raw.github.com/PaulUithol/Backbone-relational/master/backbone-relational.js"></script>
<form class="new_user">
    <p>
        <label>Name</label>
        <input type="text" name="name" />
    </p>
    <p>
        <label>Email</label>
        <input type="text" name="email" />
    </p>
    <button>Add user</button>
</form>

<table border="1" width="100%" class="users table">
    <thead>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th></th>
    </thead>
    <tbody class="users"></tbody>
    <tfoot>
        <tr>
            <td colspan="4">
                <a href="#" class="add_new_user">add</a> |
                <a href="#" class="remove_all">remove all</a>
            </td>
        </tr>
    </tfoot>
</table>
<p><a href="#" id="add_new_user">Add</a></p>

<script type="text/x-jquery-tmpl" id="users-table-tpl">

</script>

<script type="text/x-jquery-tmpl" id="user-line-tpl">
    <td>${name}</td>
    <td>${email}</td>
    <td></td>
    <td>
        <a href="#" class="destroy_user">X</a>
    </td>
</script>

SCSS

form {
    margin: 10px;
}
table {
    margin: 10px;
    td, th {
        padding: 5px;            
    }
}
p {
    margin: 10px;
}

JavaScript

$("#add_new_user").click(function() {
    console.log("new");
    users.add({name: "foo"});
});

var User = Backbone.Model.extend({});
var Users = Backbone.Collection.extend({
    model: User,
    localStorage: new Store("users")
});
var users = new Users;

var NewUserView = Backbone.View.extend({
    el: $("form.new_user"),
    events: {
        "change input": "sync_with_model",
        "click button": "create_user"
    },
    initialize: function() {
        this.model = new User;
        //_.bindAll(this, "changed");
    },
    set_name: function(event) {
        console.log($(event.currentTarget).val());
    },
    create_user: function(event) {
        console.log("creating user...");
        console.log(this.model);
        users.add(this.model.toJSON());
        
        return false; // disable form post
    },
    sync_with_model: function(evt) {
        var target = $(evt.currentTarget),
        data = {};
        data[target.attr('name')] = target.attr('value');
        this.model.set(data);
    }
});

var new_user_view = new NewUserView;

var UserLineView = Backbone.View.extend({
    tagName: "tr",
    template: $("#user-line-tpl"),
    events: {
        "click .destroy_user": "destroy_user"
    },
    initialize: function() {
        this.model.bind('destroy', this.remove, this);
        this.render();
    },
    render: function() {
        $(this.el).html(this.template.tmpl(this.model.toJSON()));
        return this;
    },
    remove: function() {
        $(this.el).remove();
    },
    destroy_user: function() {
        this.model.destroy();
    }
});

var UsersView = Backbone.View.extend({
    el: $(".users.table"),
    //template: _.template($("#users-table-tpl").html()),
    events: {
        "click .add_new_user": "new_user",
        "click .remove_all": "remove_all"
    },
    initialize: function() {
        users.bind('reset', this.reset_users, this);
        users.bind('add',   this.add_user, this);
        
        //this.render();
   ...