JSFiddle - React, Tailwind, and code Playground

by cvcode

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div class="content">
    <div class="itemEntry">    
        <input id="itemName" type="text" style="width:200px"/>   
        <input type="button" value="Add" class="add" />        
    </div>
    <div class="items">
        <ul class="list"></ul>
    </div>
</div>

CSS

.selected {background:#e0e0e0;}
.item {border:solid 1px #000;margin:2px;cursor:pointer;}
.items {border:solid 1px #000;width:200px;}

JavaScript

$(function() {

    // *** MODELS ***
    window.Item = Backbone.Model.extend({
       defaults: {
           name: "-",
           ordinal : 0
        }
    });

    // *** COLLECTIONS ***
    window.ItemList = Backbone.Collection.extend({
        model: Item
    });
    
    window.Items = new window.ItemList([
      {name: "Item #1", ordinal: 1},
      {name: "Item #2", ordinal: 2},
      {name: "Item #3", ordinal: 3}
    ]);

    // *** VIEWS ***
    window.ItemEntryView = Backbone.View.extend({
        el: $('.itemEntry'),        
        events: {
            "click .add": "addItem"
        },
        addItem: function() {
            var itemName = this.$("#itemName").val();
            var view = new ItemsView();
            var item= new Item({name:itemName});
            view.add(item);
        }
    });   
        
window.ItemView = Backbone.View.extend({
        className: 'item',
        tagName: "li",
        events: {
            "click": "toggle"
        },
        initialize: function () {
            _.bindAll(this);
            this.model.bind('change', this.render, this);
        },
        render: function () {
            $(this.el).html(this.model.get('name'));
            if (this.model.get('selected')) {
                $(this.el).addClass('selected');
            } else {
                $(this.el).removeClass('selected');
            }
            return this;
        },
        toggle: function () {
            if (this.model.get('selected')) {
                this.model.set({ selected: false });
            }
            else {
                this.model.set({ selected: true });
            }
        }
    });
    
    window.ItemsView = Backbone.View.extend({
        collection: window.Items,        
        el: $('.items'),        
        initialize: function(){
            _.bindAll(this);
            this.collection.bind('reset', this.render);
            this.collection.bind('add', this.add);
        },
        add:...