JSFiddle - React, Tailwind, and code Playground

by derickbailey

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/1.1.7/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/0.5.2/backbone.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/v0.2.0/backbone.modelbinding.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.memento/v0.1.1/backbone.memento.js"></script>
<script type="text/x-jquery-tmpl" id="list-template">
  <div style="background-color: #efefef; width: auto; height: 350px; margin: 0px auto; overflow: scroll">
    <a href="#/new">Add New Item</a>
    <ol id="list"></ol>
  </div>
</script>
<script type="text/x-jquery-tmpl" id="item-template">
  <p>
    Item name: ${name}<br/>
    <a href="#/edit/${id}">Edit</a>
    || <a href="#" class="delete">Delete</a>
  </p>
</script>
<script type="text/x-jquery-tmpl" id="add-edit-template">
  <div style="background-color: #efefef; width: auto; height: 350px; margin: 0px auto; overflow: scroll">
    Item name: <input type="text" id="name" value="${name}"><br/>
    <a href="#" id="cancel">Cancel</a>
    <input type="button" id="save" value="Save">
  </div>
</script>
<script language="javascript">
  $(function(){
    items = [
      {id: 1, name: "item #1"},
      {id: 2, name: "item #2"},
      {id: 3, name: "item #3"},
      {id: 4, name: "item #4"},
    ];
    var SimpleBBList = SimpleBBModule(jQuery);
    new SimpleBBList.Application(items).start();
  });
</script>
<div id="app-view"></div>

CSS

p { 
  margin-top: 5px;
  margin-bottom: 5px;
}

JavaScript

SimpleBBModule = (function($){
  var Item = Backbone.Model.extend({
    initialize: function(){
      this.memento = new Backbone.Memento(this);
      this.store = this.memento.push;
      this.restore = this.memento.pop;
    },

    destroy: function(){
      this.collection.remove(this);
    }

  });

  var ItemCollection = Backbone.Collection.extend({
    model: Item,

    initialize: function(){
      this.bind("add", this.itemAdded);
    },

    itemAdded: function(model){
      var id = this.length;
      model.id = id;
      model.set({id: id});
    }
  });

  var AddEditView = Backbone.View.extend({
    tagName: "form",
    template: $("#add-edit-template"),

    events: {
      "click #save": "saveModel",
      "click #cancel": "cancel"
    },

    initialize: function(options){
      this.router = options.router;
    },

    cancel: function(e){
      e.preventDefault();
      this.trigger("cancelled");
      this.model.restore();
      this.close();
    },

    saveModel: function(e){
      e.preventDefault();
      this.trigger("saved");
      this.close();
    },

    close: function(){
      this.trigger("close");
    },

    render: function(){
      this.model.store();
      var html = this.template.tmpl(this.model.toJSON());
      $(this.el).html(html);
      Backbone.ModelBinding.call(this);
      return this;
    }
  });

  var ListView = Backbone.View.extend({
    template: $("#list-template"),

    renderItem: function(item){
      var itemView = new ItemView({model: item});
      this.list.append(itemView.render().el);
    },

    render: function(){
      var html = this.template.tmpl();
      $(this.el).append(html);

      this.list = this.$("#list");
      this.collection.each(this.renderItem, this);

      return this;
    }
  });

  var ItemView = Backbone.View.extend({
    tagName: "li",
    template: $("#item-template"),

    events: {
      "click .delete": "destroy"
    },

    destroy: function(){
      this.model.destroy();
     ...