Contoh Sederhana Marionettejs

Setelah sekian lama menggunakan javascript secara biasa saja, ya sekedar load javascript gunakan fungsi2 nya dll dll. Beberapa waktu ini baca-baca mengenai beberapa cara lain menggunakan javascript, atau mungkin lebih tepatnya penggunaan teknologi baru, setidaknya bagi saya, dalam ber javascript. Mungkin sudah banyak yang tahu mengenai angularjs, emberjs, backbonejs dll. Semacam framework dan library javascript yang menggunakan pattern mvc. Katanya sih untuk memudahkan, tapi bagi saya tetap mempersulit karena harus belajar lagi. Setelah baca-baca entah kenapa saya pribadi tertarik mencoba marionette js, semacam plugin(atau apalah namanya) yang dibuat untuk backbonejs. Sila cari dan baca-baca sendiri apa itu backbone dan apa itu marionette. Kenapa tertarik dengan marionettejs? jujur karena namanya, awalnya pengen nyoba emberjs tapi kok namanya gimana gitu, ember, kurang menarik bagi saya, lebih keren marionette :))
Oke, simple saja, untuk uji coba saya implementasikan untuk bagian “panel” (klik tulisan panel di kiri atas akan muncul kotak berisi last post dan last comment). Masih sangat sederhana karena ini pertama kali menggunakan marionettejs.
Pertama, silahkan download dulu dari file-file javascript yang dibutuhkan dari website nya ada link download nya kok disitu gak usah takut, setelah itu extract dan seperti biasa load file-file javascriptnya di halaman web.
Siapkan template untuk menampilkan datanya:

<script type="text/template" id="last-post-ul">
<h3>Last Post</h3>
<ul></ul> 
</script>
<script type="text/template" id="last-post-li">
 <a href="{{ URL::to('/view/<%= slug %>') }}"><%= subject %></a>   
</script>
<div id="panelcontent" class="span12" style="display:none;">
    <div id="last-post" class="span4"></div>
</div>

Buat aplikasi marionette js nya:

var App = new Backbone.Marionette.Application();
App.addRegions({
    mainRegion:"#panelcontent",
    lastpost:"#last-post",
});
App.on("initialize:after",function(){
    if(Backbone.history) {
        Backbone.history.start();
    }
});

Untuk menampilkan last post, saya buat sebuah module:

App.module("LastPostModule",function(Mod,App,Backbone,Marionette,$,_){
})

didalam module ini nantinya akan dibuat model, proses mengambil data dan menampilkannya lewat controller dan view.
Untuk view nya sendiri dibuat seperti ini:

var postRow = Backbone.Marionette.ItemView.extend({
    template: '#last-post-li',
    tagName: 'li'
});
var PostList = Backbone.Marionette.CompositeView.extend({
    template: '#last-post-ul',
    itemViewContainer: 'ul',
    itemView: postRow
});

di view ini kita mendefinisikan tampilan untuk daftar last post yang akan ditampilkan.
Untuk modelnya, kita definisikan seperti berikut:

var LastPost = Backbone.Model.extend({
    defaults: {
        'slug': null,
        'subject':null
    }
});

slug dan subject merupakan variabel isi dari data modelnya. Kemudian kita definisikan bahwa data model adalah collection, ini mungkin semacam array/object yang berisi data last post yang akan kita gunakan, untuk datanya sendiri nanti akan berformat json, kira-kira seperti ini:

[
   {
      "subject":"Terlalu Fanatik Itu Tidak Baik",
      "slug":"terlalu-fanatik-itu-tidak-baik"
   },
   {
      "subject":"Ikuti Yang Sesuai Keinginan",
      "slug":"ikuti-yang-sesuai-keinginan"
   },
   {
      "subject":"RSS Feed",
      "slug":"rss-feed"
   },
   {
      "subject":"Sego Wiwit",
      "slug":"sego-wiwit"
   },
   {
      "subject":"Codeigniter Dijual?",
      "slug":"codeigniter-dijual"
   }
]

var PostC = Backbone.Collection.extend({
    model: LastPost
});

Setelah itu kita buat controllernya:

var Controller = Marionette.Controller.extend({
});

kemudian kita buat fungsi dari controller yang akan dieksekusi untuk menampilkan data:

initialize: function(options) {
    this.region = options.region
},
lastpost: function() {
    var post = new PostC();
    var postList = new PostList({ collection:post });

    post.fetch({url: '{{ URL::to("lastpost") }}',reset:true });

    this.region.show(postList);
}

bagian:

var post = new PostC();
var postList = new PostList({ collection:post });

mendefinisikan data dan view yang akan digunakan.
bagian

post.fetch({url: '{{ URL::to("lastpost") }}',reset:true });

untuk mengambil data last post yang akan dieksekusi via request ajax
dan terakhir

this.region.show(postList);

untuk menampilkan data.
Setelah itu kita buat initialisasi agar fungsi lastpost tersebut dijalankan:

Mod.addInitializer(function() {
    Mod.controller = new Controller({
        region: App.lastpost
    });
    Mod.controller.lastpost();
});

dan terakhir jalankan aplikasi marionette nya:

App.start();

Sebenarnya masih ada banyak sekali fitur yang bisa membuat script contoh diatas lebih singkat dan lebih efisien, tapi berhubunng baru nyoba sebatas itu ya itu dulu saja, mohon dimaafkan kalau kurang jelas karena saya sendiri juga belum terlalu ngerti. Jika ingin melihat script secara lengkap bisa dengan melihat source halaman ini.