JSFiddle - React, Tailwind, and code Playground

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">
<!DOCTYPE html>
<html>
<head>
    <title>Smart Dial</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <style stype="text/css">
      #wrapper {
        margin-top: 20px;
      }
    </style>
</head>
<body>  
    <div id="wrapper" class="container">
      <table class="table">
          <tr>
            <th>Choose Dial</th><th>Number</th><th>Description</th><th>Action</th>
          </tr> 
          <script id="mytemplate" type='text/html'>   
            <% dial = dial === null ? 'Not assigned' : dial; %>   
            <td><%= dial %></td>
            <td><%= number %></td>
            <td><%= description %></td>
            <td><button class="btn btn-primary edit">Edit</button></td> 
          </script>

          <script id="mytemplate_edit" type='text/html'>
            <%
              var select = ['<select>','</select>']; 
              var options = []; 
              AVAILABLE_DIALERS.sort(); 
              for(var i = 0;i < AVAILABLE_DIALERS.length;i++) {
                options.push('<option value="' +  AVAILABLE_DIALERS[i] + '">' +  AVAILABLE_DIALERS[i]  + '</option>');
              }
              select =  select.join(options.join('')); 
            %>
            <td><%= select %></td>
            <td><input type="text" class="num" value="<%= number %>" /></td>
            <td><input type="text" class="desc" value="<%= description %>" /></td>
            <td><button class="btn save btn-primary">Save</button></td> 
          </script> 
      </table>  
    </div>

    <script src="js/lib/jquery.js"></script>
    <script src="js/lib/underscore.js"></script>
    <script src="js/lib/backbone.js"></script> 
  
</body>
</html>

JavaScript

(function($){ 
		AVAILABLE_DIALERS = [0,1,2,3,4,5,6,7,8,9]; 
          
        var SmartDial = Backbone.Model.extend({
          defaults: {
            dial: null,
            number : '',
            description: ''
          }
        });
        
        var List = Backbone.Collection.extend({
          model: SmartDial
        });

        var ItemEdit = Backbone.View.extend({
          tagName: '<tr>', // name of tag to be created         
          template:_.template($('#mytemplate_edit').html()),
          events: {  
            'click button.save':  'save',
            'click button.edit':  'editMode', 
            'keypress input'    : 'examineEnter'
          },
          initialize: function(){
            _.bindAll(this, 'render','editMode','save');
          }, 
          editMode : function() {     
            $('button.edit').prop('disabled',true);
            this.render(); 
            return this;
          }, 
          save : function () { 
            var selected_dial = +($(this.el).find('select').val());  

            // If dial has been asigned already, free the last one 
            if(this.model.get('dial') !== null) {
              AVAILABLE_DIALERS.push(this.model.get('dial')); 
            } 
            AVAILABLE_DIALERS = _.reject(AVAILABLE_DIALERS, function(dial){ return dial === selected_dial });
            
            this.model.set({
              dial : selected_dial,
              number : $(this.el).find('.num').prop('value'),
              description: $(this.el).find('.desc').prop('value') 
            }); 

            $('button.edit').prop('disabled',false);
            console.log(this.model.toJSON());
            var itemView = new ItemView({
              model: this.model
            }); 
            $(this.el).html(itemView.render());
          },
          render: function() {  
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
            //return...