JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="https://raw.github.com/mikeric/rivets/v0.4.3/lib/rivets.js"></script>
<div id="store">
    <h2 data-text="store.Title"></h2>
    <ul>
        <li data-each-item="storeItems.models">
            <span data-text="item:GetText"></span>
            <a href="#" data-on-click="item:Edit">Edit</a>
        </li>
    </ul>
</div>
<div id="holder">
</div>

<script type="text/template" id="editItemDialog">
    <div>
        <hr>
        <div>
            <label>name:</label><input data-value="item.Name"/>
        </div>
        <div>
            <label>price:</label><input data-value="item.Price"/>
        </div>
        <div>
            <label>description:</label><textarea data-text="item.Description"></textarea>
        </div>
        <hr>
        <div><a href="#" class="close-link">Close</a></div>
    </div>
</script>

CSS

.active
{
    font-weight:bold;
    background-color:orange;
}

h2
{
    font-weight:bold;
    font-size: x-large;
}

JavaScript

rivets.configure({
adapter: {
  subscribe: function(obj, keypath, callback) {
    if (obj instanceof Backbone.Model) {
      return obj.on('change:' + keypath, callback);
    } else if (obj instanceof Backbone.Collection) {
      return obj.on('add remove reset change', function() {
        return callback(obj[keypath]);
      });
    }
  },
  unsubscribe: function(obj, keypath, callback) {
    if (obj instanceof Backbone.Model) {
      return obj.off('change:' + keypath, callback);
    } else if (obj instanceof Backbone.Collection) {
      return obj.off('add remove reset', function() {
        return callback(obj[keypath]);
      });
    }
  },
  read: function(obj, keypath) {
    if (obj instanceof Backbone.Model) {
      return obj.get(keypath);
    } else {
      return obj[keypath];
    }
  },
  publish: function(obj, keypath, value) {
    if (obj instanceof Backbone.Model) {
      return obj.set(keypath, value);
    } else {
      return obj[keypath] = value;
    }
  }
}
});

$(document).ready(function (){
    var Item = Backbone.Model.extend({
        GetText: function() {
            return this.get('Name') + " | $" + this.get('Price'); 
        },
        Edit: function() {
            this.trigger('edit', this);
        }
    });
    
    var ItemCollection = Backbone.Collection.extend({
        model: Item
    });

    var ItemView = Backbone.View.extend({
        templateId: '#editItemDialog',
        events: {'click .close-link': 'close'},
        
        render: function() {
            var templateFunction = _.template($(this.templateId).html());
            var html = templateFunction();
            this.setElement(html);
            rivets.bind(this.$el, {item: this.model});
            return this;
        },
        
        close: function() {
            this.$el.empty();            
        }
    });
    
    var Store = Backbone.Model.extend({
        initialize: function(options) {
            this.set({Title: "Cyclist Stuff",
          ...