Pelajari KnockoutJS: Contoh Praktis MVVM untuk Pemula!

Daftar Isi

Pengantar KnockoutJS dan MVVM
Setup Lingkungan dan Instalasi
Konsep MVVM dalam KnockoutJS
Data Binding Dasar
Observable dan ObservableArray
Computed Observables
Event Handling
Template dan Pengulangan Data
Contoh Aplikasi Sederhana
Sumber Belajar dan Source Code

1. Pengantar KnockoutJS dan MVVM

KnockoutJS adalah sebuah library JavaScript yang memudahkan pengembangan aplikasi web dengan pola arsitektur MVVM (Model-View-ViewModel). MVVM membantu memisahkan logika aplikasi dari tampilan, sehingga kode menjadi lebih terstruktur dan mudah dipelajari.

Dengan KnockoutJS, Anda dapat menghubungkan data dan tampilan secara otomatis menggunakan data binding, sehingga perubahan data langsung tercermin di UI tanpa perlu menulis kode DOM secara manual.

Diagram ilustrasi pola arsitektur MVVM yang menunjukkan hubungan antara Model, View, dan ViewModel

2. Setup Lingkungan dan Instalasi

Untuk mulai menggunakan KnockoutJS, Anda hanya perlu menambahkan library Knockout melalui CDN ke dalam file HTML Anda. Tidak perlu instalasi rumit.

<script src="https://cdn.jsdelivr.net/npm/knockout@3.5.1/build/output/knockout-latest.js"></script>

Contoh struktur file HTML sederhana:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh KnockoutJS</title>
  <script src="https://cdn.jsdelivr.net/npm/knockout@3.5.1/build/output/knockout-latest.js"></script>
</head>
<body>
  <div>
    <h2 data-bind="text: message"></h2>
  </div>

  <script>
    function ViewModel() {
      this.message = ko.observable("Halo, KnockoutJS!");
    }
    ko.applyBindings(new ViewModel());
  </script>
</body>
</html>

3. Konsep MVVM dalam KnockoutJS

MVVM adalah pola arsitektur yang memisahkan aplikasi menjadi tiga bagian utama:

Model: Data dan logika bisnis aplikasi.
View: Tampilan UI yang dilihat pengguna.
ViewModel: Penghubung antara Model dan View, mengelola data dan logika tampilan.

KnockoutJS memudahkan implementasi MVVM dengan menyediakan fitur observables dan data binding yang otomatis memperbarui UI saat data berubah.

Diagram alur MVVM yang menunjukkan interaksi antara Model, ViewModel, dan View dengan KnockoutJS

4. Data Binding Dasar

Data binding adalah fitur utama KnockoutJS yang menghubungkan data di ViewModel dengan elemen HTML di View. Binding ini bersifat dua arah (two-way binding), sehingga perubahan di UI akan mengubah data dan sebaliknya.

Contoh binding teks:

<h1 data-bind="text: title"></h1>

<script>
  function ViewModel() {
    this.title = ko.observable("Judul Dinamis");
  }
  ko.applyBindings(new ViewModel());
</script>

Contoh binding input dua arah:

<input type="text" data-bind="value: name" />
<p>Halo, <span data-bind="text: name"></span>!</p>

<script>
  function ViewModel() {
    this.name = ko.observable("Pengguna");
  }
  ko.applyBindings(new ViewModel());
</script>

5. Observable dan ObservableArray

Observable adalah variabel yang dapat dipantau perubahan nilainya oleh KnockoutJS. Ketika nilai observable berubah, UI yang terikat akan otomatis diperbarui.

Contoh observable:

this.counter = ko.observable(0);

ObservableArray adalah array yang dapat dipantau perubahan isinya, seperti penambahan atau penghapusan item.

Contoh observableArray:

this.items = ko.observableArray(["Apel", "Jeruk", "Pisang"]);

Ketika Anda menambahkan atau menghapus item dari observableArray, tampilan yang terikat akan otomatis diperbarui.

6. Computed Observables

Computed observables adalah nilai yang dihitung secara otomatis berdasarkan observables lain. Nilai ini akan diperbarui secara otomatis saat observables yang menjadi dasarnya berubah.

Contoh computed observable:

function ViewModel() {
  this.firstName = ko.observable("Budi");
  this.lastName = ko.observable("Santoso");

  this.fullName = ko.computed(() => {
    return this.firstName() + " " + this.lastName();
  });
}

Binding di HTML:

<p>Nama lengkap: <span data-bind="text: fullName"></span></p>

7. Event Handling

KnockoutJS juga menyediakan binding untuk menangani event seperti klik tombol, submit form, dan lain-lain.

Contoh event click:

<button data-bind="click: increment">Tambah</button>
<p>Nilai: <span data-bind="text: counter"></span></p>

<script>
function ViewModel() {
  this.counter = ko.observable(0);
  this.increment = () => {
    this.counter(this.counter() + 1);
  };
}
ko.applyBindings(new ViewModel());
</script>

8. Template dan Pengulangan Data

Untuk menampilkan daftar data, KnockoutJS menyediakan binding foreach yang mengulangi elemen HTML untuk setiap item dalam observableArray.

Contoh menampilkan daftar buah:

<ul data-bind="foreach: items">
  <li data-bind="text: $data"></li>
</ul>

<script>
function ViewModel() {
  this.items = ko.observableArray(["Apel", "Jeruk", "Pisang"]);
}
ko.applyBindings(new ViewModel());
</script>

Anda juga bisa menggunakan binding if untuk menampilkan elemen secara kondisional.

9. Contoh Aplikasi Sederhana

Berikut contoh aplikasi daftar tugas (to-do list) sederhana menggunakan KnockoutJS:

<div>
  <h3>Daftar Tugas</h3>
  <input type="text" placeholder="Tugas baru" data-bind="value: newTask, valueUpdate: 'afterkeydown'" />
  <button data-bind="click: addTask, enable: newTask().trim() !== ''">Tambah</button>

  <ul data-bind="foreach: tasks">
    <li>
      <input type="checkbox" data-bind="checked: done" />
      <span data-bind="text: name, css: { 'line-through text-gray-400': done() }"></span>
      <button data-bind="click: $parent.removeTask" class="ml-2 text-red-600 hover:text-red-800"><i class="fas fa-trash-alt"></i></button>
    </li>
  </ul>
</div>

<script>
function Task(name) {
  this.name = ko.observable(name);
  this.done = ko.observable(false);
}

function ViewModel() {
  this.newTask = ko.observable("");
  this.tasks = ko.observableArray([]);

  this.addTask = () => {
    if (this.newTask().trim() !== "") {
      this.tasks.push(new Task(this.newTask().trim()));
      this.newTask("");
    }
  };

  this.removeTask = (task) => {
    this.tasks.remove(task);
  };
}

ko.applyBindings(new ViewModel());
</script>

Aplikasi ini memungkinkan Anda menambah tugas baru, menandai tugas selesai, dan menghapus tugas.

10. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan channel yang dapat membantu Anda mendalami KnockoutJS:

Situs Resmi KnockoutJS - Dokumentasi lengkap dan tutorial resmi.
Academind (YouTube) - Channel pembelajaran web development yang lengkap.
Traversy Media (YouTube) - Tutorial JavaScript dan framework populer.
GitHub KnockoutJS - Source code dan contoh aplikasi.

Anda dapat mengunduh source code contoh aplikasi to-do list di bawah ini dan memodifikasinya sesuai kebutuhan:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>To-Do List KnockoutJS</title>
  <script src="https://cdn.jsdelivr.net/npm/knockout@3.5.1/build/output/knockout-latest.js"></script>
</head>
<body>
  <div>
    <h3>Daftar Tugas</h3>
    <input type="text" placeholder="Tugas baru" data-bind="value: newTask, valueUpdate: 'afterkeydown'" />
    <button data-bind="click: addTask, enable: newTask().trim() !== ''">Tambah</button>

    <ul data-bind="foreach: tasks">
      <li>
        <input type="checkbox" data-bind="checked: done" />
        <span data-bind="text: name, css: { 'line-through text-gray-400': done() }"></span>
        <button data-bind="click: $parent.removeTask" class="ml-2 text-red-600 hover:text-red-800"><i class="fas fa-trash-alt"></i></button>
      </li>
    </ul>
  </div>

  <script>
  function Task(name) {
    this.name = ko.observable(name);
    this.done = ko.observable(false);
  }

  function ViewModel() {
    this.newTask = ko.observable("");
    this.tasks = ko.observableArray([]);

    this.addTask = () => {
      if (this.newTask().trim() !== "") {
        this.tasks.push(new Task(this.newTask().trim()));
        this.newTask("");
      }
    };

    this.removeTask = (task) => {
      this.tasks.remove(task);
    };
  }

  ko.applyBindings(new ViewModel());
  </script>
</body>
</html>