Easyview adalah plugin MVVM (model – view – viewmodel) yang penulis buat untuk jQuery. Dalam arsitektur MVVM, business logic dipisah dengan user-interface sehingga diperlukan mediator yang menangani sinkronisasi data dengan tampilan. Sederhananya, ketika ada perubahan data maka secara otomatis akan meng-update tampilan dan sebaliknya. Pemisahan ini membuat aplikasi lebih konsisten, terstruktur, mudah dibaca dan lebih ramping sehingga mempermudah pengembangan aplikasi kedepan.

Github

https://github.com/londomloto/easyview

Motivasi

Menampilkan data di dalam aplikasi yang dibangun berbasis jQuery sebenarnya bukan perkara sulit. Kita tinggal melakukan query DOM kemudian kita update kontent-nya. Tetapi kita harus ingat bahwa rutinitas seperti ini terkadang menjadi hal yang membosankan apalagi dalam aplikasi yang komplek dan user-interface yang sangat dinamis. Kita memerlukan suatu sistem automasi yang dapat menangani sinkronisasi antara logic dan presentasi.  Saat ini sudah banyak bermunculan library – library maupun framework yang menerapkan arsitektur MVVM seperti Knockout, Angular, ReactJS, VueJS, Riot dll. Menerapkan library – library tersebut bukanlah hal sulit, namun diperlukan perancangan ulang arsitektur eksisting aplikasi kita yang pastinya memerlukan waktu.

Easyview memfasilitasi fitur MVVM pada aplikasi kita yang murni berbasis jQuery saja. Easyview hanya sebuah plugin yang digunakan untuk menambahkan kemampuan MVVM dan penggunaanya sama seperti plugin – plugin jQuery lainnya sehingga tidak terlalu banyak merubah arsitektur aplikasi yang ada (hanya perubahan sedikit pada layer interface).

Element Sebagai Template

Ketika kita menggunakan plugin ini, maka logic program yang masih dituliskan dalam layer view (user interface) harus dikeluarkan dan diganti dengan kode markup – markup (binding markup). Sehingga, sekarang tampak bahwa user-interface hanya sebuah template saja.

Binding Markup

Karena layer view (elemen HTML) sudah berbentuk template, maka penulisan – penulisannya menggunakan kode – kode markup. Penulisan markup disesuaikan dengan mode binding yang digunakan. Ada dua jenis mode binding yang digunakan oleh plugin ini yaitu:

  • One Way Binding, tampilan hanya dapat menerima perubahan – perubahan data tetapi perubahan pada tampilan tidak berimbas pada data.
  • Two Way Binding, perubahan data otomatis akan merubah tampilan, dan perubahan tampilan akan berimbas pada status data.

Markup – markup ini dituliskan sebagai atribute dari elemen HTML dengan menggunakan sintak data-link. Contoh:

// one way binding
<h1 data-link="{:title}"></h1>

// two way binding
<input type="text" data-link="title">

// atau,
<input type="text" data-link="{:title:}">

Namun, untuk interpolation-markup seperti control-flow, dituliskan dengan menggunakan tanda {^{…}} dengan tanda ^ sebagai penanda binding. Contoh:

{^{if hero}}
<h1 data-link="{:hero^name}"></h1>

{{/if}}

// atau
{^{for heroes}}
<li data-link="{:hero^name}"></li>

{{/for}}

 

Penggunaan

Untuk menggunakan plugin ini, cukup menyertakan file easyview.js ke dalam aplikasi kita, kemudian gunakan sebagai plugin jQuery biasa.

<script src="jquery.js></script>
<script src="easyview.js></script>

 

<div id="example">
<h1>My Heroes</h1>
Pilih hero untuk melihat detail
<ul>
    {^{for heroes}}
	<li data-link="{:name}"></li>
{{/for}}</ul>
{^{if selected}}
<h2 data-link="{:selected^name}"></h2>
<input type="text" data-link="selected^name trigger=true">
   {{/if}}</div>

 


$('#example').easyview({
  model: {
    selected: null,
    heroes: [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ]
  },
  events: {
    'click li': 'onSelectHero'
  },
  onSelectHero: function(e){
    var node = $(e.currentTarget),
        hero = this.get(node);

      this.set('selected', hero);
  }
});

Advertisements