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">
<script src="http://raw.github.com/jeromegn/Backbone.localStorage/master/backbone.localStorage-min.js"></script>
<b>Kode :</b> <input type='text' class='thstyle1' id='kode'/>
<br>
<b>Judul :</b> <input type='text' class='thstyle4' id='judul'/>
<br>
<b>Sub Judul :</b> <input type='text' class='thstyle4' id='subjudul'/>
<br>
<b>ISBN :</b><input type='text' class='thstyle1' id='ISBN'/>
<br>
<b>Bibliografi :</b> <input type='text' class='thstyle1' id='bibliografi'/>
<br>
<input class="toggle" type="checkbox"/><b>Index</b>
<input class="toggle" type="checkbox"/><b>Table</b>
<button class='btn btn-primary'>Save</button>

<input type="text" value=<%= kode %>/>

<script id="bookItem" type="text/template">
<td><span id="valueKode"><i>nothing</i></span></td>
<td><span id="valueJudul" ><i>nothing</i></span></td>
<td><span id="valueSubJudul" ><i>nothing</i></span></td>
<td><span id="valueISBN" ><i>nothing</i></span></td>
<td><span id="valueBibliografi" ><i>nothing</i></span></td>
<td><button class='btn btn-mini btn-primary'><i class='icon-remove'></td>
</script>

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 BookModel=Backbone.Model.extend({
    defaults:{
        kode:'empty',
        judul:'empty',
        subJudul:'empty',
        isbn:'empty',
        bibliografi:'empty',
        index:false,
        table:false
    }        
});
var BookTodo=Backbone.View.extend({
    initialize:function(){
              
    }
});
var BookCollection = Backbone.Collection.extend({
    // Save all of the todo items under the 'todos-marionette' namespace.
    localStorage: new Backbone.LocalStorage("jsfiddle-books"),    
    model: BookModel
});
var Book = Backbone.View.extend({    
  el: $('body'),
  template: "#bookItemTemplate",
  events: {
      'change #kode':'changeKode'
  },
  initialize: function(){
    _.bindAll(this, 'render','changeKode');
    console.log(this.options('kode'),'model');
    this.inputkode = this.$('#kode');
    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 id='bookViewTable'>"+
         "<tr>"+
         "</tr>"+
         "</tbody>"+
         "</table>"+
         "</fieldset>"+
         "</form>");
      },

  changeKode: function(e) {
      console.log(e,'apa tho');
    var input = this.inputkode;
      console.log('opo',input.val());
    // if you use local storage save 
    //book.set({kode: input.val()});         
  }

});

var book = new Book({kode:'001',judul:'Everything for you',subJudul:'I miss u',isbn:'1243',bibliografi:'cetakan 4',index:false,table:true});
var bookCollection=new BookCollection(book);


bookCollection.add([{kode:'002',judul:'I wanna be...