Learn jquery backbone

Event change input, render html table

by erick

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<b>Kode :</b> <span id="valueKode"><i>nothing</i></span>
<br>
<b>Judul :</b> <span id="valueJudul" ><i>nothing</i></span>
<br>
<b>Sub Judul :</b> <span id="valueSubJudul" ><i>nothing</i></span>
<br>
<b>ISBN :</b> <span id="valueISBN" ><i>nothing</i></span>
<br>
<b>Bibliografi :</b> <span id="valueBibliografi" ><i>nothing</i></span>

CSS

.thstyle1{
    width: 50px; 
    text-align:center
}
.thstyle2{
    width: 100px; 
    text-align:center
}
.thstyle3{
    width: 500px; 
    text-align:center
}
.thstyle4{
    width: auto; 
    text-align:center
}
.tocenter{
    text-align:center
}

JavaScript

var ListView = Backbone.View.extend({    
  el: $('body'),
  events: {
      'change input#kode': 'changeKode',
      'change input#judul':'changeJudul',
      'change input#subjudul':'changeSubJudul',
      'change input#ISBN':'changeISBN',
      'change input#bibliografi':'changeBibliografi'       
  },

  initialize: function(){
    _.bindAll(this, 'render');

    this.render(); 
    },
    render: function(){
       $(this.el).append(
         "<form class='well'>"+
         "<fieldset>"+
         "<legend>Percobaan Table</legend>"+
         "<table class='table'>"+
         "<thead>"+
         "<tr>"+
         "<th class='thstyle1'>Kode</th>"+
         "<th class='thstyle2'>Judul</th>"+
         "<th class='thstyle3'>Sub Judul</th>"+
         "<th class='thstyle4'>ISBN</th>"+
         "<th class='thstyle4'>Bibliografi</th>"+
         "</tr>"+
         "</thead>"+
         "<tbody>"+
         "<tr>"+
         "<td>"+
         "<input type='text' class='thstyle1' id='kode'/>"+
         "</td>"+
         "<td>"+
         "<input type='text' class='thstyle4' id='judul'/>"+
         "</td>"+
         "<td>"+
         "<input type='text' class='thstyle4' id='subjudul'/>"+
         "</td>"+
         "<td>"+
         "<input type='text' class='thstyle1' id='ISBN'/>"+
         "</td>"+
         "<td>"+
         "<input type='text' class='thstyle1' id='bibliografi'/>"+
         "</td>"+
         "<td>"+
         "<button class='btn btn-mini btn-primary'>"+"<i class='icon-plus'>"+
         "</td>"+
         "</tr>"+
         "</tbody>"+
         "</table>"+
         "</fieldset>"+
         "</form>");
      },

  changeKode: function(e) {
        var val = $(e.currentTarget).val();
        $('#valueKode').html(val);          
  },
  changeJudul: function(e) {
        var val = $(e.currentTarget).val();
        $('#valueJudul').html(val);          
  },
  changeSubJudul: function(e) {
        var val = $(e.currentTarget).val();
        $('#valueSubJudul').html(val);    ...