JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
  <div id="app"></div>

  
  <script type="text/template" id="library-template">
    <h1>Library</h1>
    <ul id="books-list"></ul>
    <div id="new-book"></div>
    <a href="javascript:void(0);" id="add-book">[Add Book]</a>
  </script>
  
  <script type="text/template" id="book-template">
      <strong><%= model.get("author") %></strong> - <%= model.get("title") %>
    <span class="controls">
        <a href="javascript:void(0);" item-action="edit">[Edit]</a>
        <a href="javascript:void(0);" item-action="delete">[Delete]</a>
    </span>
  </script>
  
  <script type="text/template" id="book-form">
    <label>Author</label>
    <input type="text" name="author" value="<%= model.get("author") %>" />
    <label>Title</label>
    <input type="text" name="title" value="<%= model.get("title") %>" />
    <a href="javascript:void(0);" id="submit">[Submit]</a>
  </script>

CSS

body { font-family: Georgia, Arial, sans; }
    ul#books-list li span.controls {
        display: none;
    }

    ul#books-list li:hover span.controls {
        display: inline;
    }

JavaScript

$(function(){
    // Book Model
    var Book = Backbone.Model.extend({
        defaults: function() {
            return {
                title: "enter title",
                author: "enter "
            };
        },
        
        clear: function() {
            this.destroy();
        }

    });
    
    // BooksCollection
    var BooksCollection = Backbone.Collection.extend({
        model: Book,
        url: "/books.json"
    });
    
    // instantiate BooksCollection
    var Library = new BooksCollection;

    
    var BookView = Backbone.View.extend({
        // we will create new element, so use tagName
        tagName: "li",
        
        events: {
            "click a[item-action=delete]": "clear",
            "click a[item-action=edit]": "edit",
            "click a#submit": "onSubmit"            
        },

        // our template for book view
        template: _.template($("#book-template").html()),
        template_form: _.template($("#book-form").html()),
        
        initialize: function() {
            // something to do on startup?
        }, 
        
        render: function() {
            this.$el.html( this.template({ model: this.model }) );
            return this;
        },
        
        clear: function() {
            this.$el.remove();
            this.model.clear();
        },
        
        edit: function() {    
            // add a class to the element to enable easy styling with css
            this.$el.addClass("edit");
            // render form template
            this.$el.html(this.template_form({model:this.model}));        
        },
        
        onSubmit: function() {
            var val_title = this.$("input[name=title]").val();
            var val_author = this.$("input[name=author]").val();
            this.model.set({
                title: val_title,
                author: val_author
            });

            // maybe the user didn't changed the values!
            if (!...