Belajar Backbone

belajar backbone js step by step

HTML

<script src="https://raw.github.com/mekwall/jquery-vangogh/master/src/jquery.vangogh.min.js"></script>
<h1>Belajar BackboneJS</h1>
<p>Backbone js sebenarnya konsepnya hampir sama seperti MVC(Model View Controller) milik Microsoft ASP.NET, bedanya kalo ini memiliki model, view, collection dan router.</p>
<p>Di samping itu backbone juga memiliki kelebihan yaitu dapat menyimpan pada localStorage</p>
<p>Gue akan jelasin cara gunakan feature yang ada pada backbone, diantaranya:
    <ul>
        <li><a href="#">Model</a></li>
        <li><a href="#">Collection</a></li>
        <li><a href="#">View</a></li>
        <li><a href="#">Router</a></li>
        <li><a href="#">Local Storage</a></li>
        <li><a href="#">Template</a></li>
    <ul>
</p>
<h2>Contoh Untuk Buat Model</h2>
<p>Kali ini gue akan menjelaskan cara menggunakan backbone js, pertama gue jelasin model atau bisa dibilang object dan property propertynya, kalo yang masih awam dalam dunia programming bisa dibilang data utama/pokok yang akan di otak atik.... hehehe, bagi yang masih awam dengan javascript ke<a href="#">sini</a> aja dulu</p>
<pre class="c"><code class="language-javascript">
//propertynya yang di definisikan dengan defaults
var Book = Backbone.Model.extend({
   defaults: {
      photo: "",
      kode: "",
      judul: "",
      subJudul:"",
      isbn: "",
      bibliografi: "",
      type: ""
   }
});
</code></pre>
        <p>Di samping itu gue juga bisa mendapatkan value ataupun mengisi value dari salah satu property dengan cara seperti ini</p>
<pre class="c"><code class="language-javascript">
//instance dari model
var b = new Book();
//mengambil value isbn
b.get('isbn');
//mengisi value isbn
b.set({isbn:'1232'});
//untuk mengececk di console
console.log(b.get('isbn'), "ini nilai isbn");
//maka hasilnya akan seperti ini: 1232 ini nilai isbn
</code></pre>
<p>Kita juga bisa memberi value dengan cara begini</p>
<pre class="c"><code class="language-javascript">
//instance dari model
var b = new...

CSS

body, html {
    font: 13.34px helvetica,arial,freesans,clean,sans-serif;
}
 
body {
    line-height: 1.4;
    padding: 20px 30px;
}

p { 
    margin: 1em 0; 
    font-size: 1.1em; 
}
 
h1 {
    margin-bottom: 0;
    font-size: 30px;
    height: 54px;
    line-height: 54px;
    font-weight: bold;
    letter-spacing: -1px;
    text-shadow: 1px 1px 0 white;
    color: #495961;
}
 
h2 {
    color: #4183C4;
    font-size: 1.9em;
    height: 2em;
    line-height: 2em;
    font-weight: bold;
}

/* here thy artist beginst hast work */
.vg-container {
    position: relative;
    overflow: auto;
}
 
.vg-container,
.vg-code {
    border: 0;
    margin: 0;
}
 
.vg-container .vg-line,
.vg-container .vg-number {
    display: block;
    height: 1.5em;
    line-height: 1.5em !important;
}
 
.vg-gutter {
    float: left;
    min-width: 20px;
    width: auto;
    -o-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
.vg-number {
    cursor: pointer;
}
 
/*
github.com style (c) Vasily Polovnyov <[email protected]>
extended and modified for vanGogh by Marcus Ekwall <[email protected]>
*/
 
.vg-container {
    font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace;
    font-size: 12px;
    border: 1px solid #ddd;
}
 
.vg-gutter {
    background-color: #ececec;
    border-right: 1px solid #ddd;
    text-align: right;
    color: #aaa;
    padding: 1em .5em;
    margin-right: .5em;
}

.vg-code *::-moz-selection,
.vg-code *::-webkit-selection,
.vg-code *::selection,
.vg-line.vg-highlight {
    background-color: #ffc;
}
 
.vg-line span.vg-highlight {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}
 
.vg-container .vg-code {
    display: block;
    padding: 1em .5em;
    background: #fff;
}
 
.vg-code {
    color: #000;
    background: #f8f8ff;
    border: 0;
    padding: .4em;
}
 
.vg-code .comment,
.vg-code...

JavaScript

$(function() {
    // default
    $(".c").vanGogh();
    
    // without numbers/gutter and horizontal scrolling
    $("pre:eq(1), pre:eq(2)").vanGogh({ numbers: false });
    
    // inline highlighting
    $("code.inline").vanGogh();
    
    // remote source
    $("#r").vanGogh({ source: "/deid4r4/gkStE/show/", maxLines: 20 });
});