JSFiddle - React, Tailwind, and code Playground

by jashwant

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="wrapper" class="container">
       <table class="table">
          <tr>
            <th>Choose Dial</th><th>Number</th><th>Description</th><th colspan="2"></th>
          </tr> 
          <script id="smartKeyTemplate" type='text/html'>    
            <%
              //console.log('Attrs ',attrs);
              //console.log('Available keys ',avail_keys);

              var hot_key =  attrs.hot_key === undefined ?  '' : attrs.hot_key;
              var num = attrs.num;
              var desc = attrs.desc; 
 
              var select = ['<select class="edit hot_key">','</select>']; 
              var options = [];  

              if(attrs.hot_key !== undefined) {
                avail_keys.push(attrs.hot_key);
                avail_keys.sort();
              }
              for(var i = 0;i < avail_keys.length;i++) {
                if(avail_keys[i] === hot_key) {
                  options.push('<option selected value="' +  avail_keys[i] + '">' +  avail_keys[i]  + '</option>');
                }
                else {
                  options.push('<option value="' +  avail_keys[i] + '">' +  avail_keys[i]  + '</option>');
                }
                
              }
              select =  select.join(options.join('')); 
            %>
            <td> 
              <span class="view edit-btn"><%= hot_key %></span>
              <%= select %>
            </td>
            <td> 
              <span class="view edit-btn"><%= num %></span>
              <input type="text" class="edit num" value="<%= num %>" /> 
            </td>
            <td> 
              <span class="view edit-btn"><%= desc %></span>
              <input type="text" class="edit desc" value="<%= desc %>" />
           ...

CSS

#wrapper {
        margin-top: 20px;
      }  
     .action {
         display:none;
     }
     tr:hover td.action {
       display: inline-block;
     }
     }
      td span {
        width: 206px; 
      }
      option[selected] {
        color: green;
      }
      tr .view {
        display: none;
        cursor: pointer;
      } 
      tr.showing .view {
        display: block;
      }
 
      tr.showing .edit {
        display: none;
      }

JavaScript

(function($) {    
        var ItemView = Backbone.View.extend({
          tagName: '<tr>',         
          template:_.template($('#smartKeyTemplate').html()),
          events: {  
            'click .save-btn'   : 'save',
            'click .edit-btn'   : 'editView', 
            'keydown input'    : 'keyActions',
            'click .delete-btn' : 'delete',
            'click .cancel-btn' : 'cancel'
          },
          initialize: function() {  
            this.HOT_KEYS = [0,1,2,3,4,5,6,7,8,9]; 
            this.model.on( 'destroy', this.remove, this );
          }, 
          avail_keys : function () {  
            var models = this.collection.models; 
            var hot_keys = _(models).map(function (model) {
              return model.get('hot_key');
            }); 

            var avail_keys =  _.reject(this.HOT_KEYS,function (key) {
              return _(hot_keys).indexOf(key) !== -1
            });  

            return avail_keys; 
          },
          cancel: function () {
            listView.$('button.edit-btn,#add').prop('disabled',false); 
            if(typeof this.model.get('hot_key') === 'undefined') {
              this.delete().$el.addClass('showing')
              return;
            } 
            this.render().$el.addClass('showing'); 
          },
          editView : function() {     
            $('button.edit-btn,#add').prop('disabled',true);  
            this.$el.removeClass('showing');
            return this.render();  
          }, 

          save : function () {    
            this.model.set({
              hot_key : +(this.$('.hot_key').val()),
              num : this.$('.num').prop('value'),
              desc: this.$('.desc').prop('value')
            },{validate: true});   
  
            if(this.model.validationError) {         // Gives validationError message
              console.log('Error in model: ',this.model.validationError);
            }  

            this.render().$el.addClass('showing');
          ...