⏱️ Nếu chỉ có 1 tiếng để học KnockoutJS

---

⏱️ Nếu chỉ có 1 tiếng để học KnockoutJS

Mục tiêu chiến đấu:

• 🧠 Hiểu KnockoutJS là gì

• 🔗 Biết dùng data-bind

• 🌱 Hiểu observable() và observableArray()

• 📝 Làm 1 app nhỏ CRUD trong 20 dòng code

---

🏹 KnockoutJS là gì?

Nó là thư viện ràng buộc dữ liệu ↔ giao diện theo mô hình MVVM.

👉 Tóm gọn: Bạn đổi giá trị trong JS → UI đổi theo.
Không cần document.getElementById(...).innerText = ... thủ công nữa.

---

📦 Cài KnockoutJS (gọi 1 cái là xài)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>

---

🔮 observable() = biến biết “tự báo”

function ViewModel() {
  this.name = ko.observable("Tiến sĩ M");
}
ko.applyBindings(new ViewModel());

HTML:

<input data-bind="value: name">
<p>Xin chào: <span data-bind="text: name"></span></p>

➡️ Gõ vào input → nội dung dưới thay đổi real-time.

---

🧺 observableArray() = danh sách sống

function ViewModel() {
  this.items = ko.observableArray(["Táo 🍎", "Chuối 🍌"]);
  this.newItem = ko.observable("");

  this.addItem = () => {
    if(this.newItem()) {
      this.items.push(this.newItem());
      this.newItem("");
    }
  };
}
ko.applyBindings(new ViewModel());

HTML:

<input data-bind="value: newItem">
<button data-bind="click: addItem">Thêm ➕</button>

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

---

🧰 15 phút cuối: CRUD Mini Todo List

function ViewModel() {
  let self = this;

  self.tasks = ko.observableArray([
    { title: ko.observable("Làm cà phê ☕") },
    { title: ko.observable("Ghi nhật ký 📓") }
  ]);

  self.newTask = ko.observable("");

  self.addTask = function() {
    if(self.newTask()) {
      self.tasks.push({ title: ko.observable(self.newTask()) });
      self.newTask("");
    }
  };

  self.removeTask = function(task) {
    self.tasks.remove(task);
  };
}
ko.applyBindings(new ViewModel());

HTML:

<h2>Todo List ✅</h2>
<input data-bind="value: newTask" placeholder="Thêm việc... ✍️">
<button data-bind="click: addTask">➕</button>

<ul data-bind="foreach: tasks">
  <li>
    <input data-bind="value: title">
    <button data-bind="click: $parent.removeTask">❌</button>
  </li>
</ul>

---

🧩 Ghi nhớ nhanh (Flashcard kiểu ninja)

Biểu thức	Ý nghĩa
ko.observable()	biến tự cập nhật UI
ko.observableArray()	danh sách tự cập nhật UI
data-bind="text: x"	hiển thị dữ liệu
data-bind="value: x"	input ↔ biến
data-bind="click: fn"	gán sự kiện click

---

🎯 Bài tập tự luyện (5 phút)

Thêm:

• ✏️ Nút Edit → Save

• 📊 Nút Sắp xếp A→Z / Z→A

Nếu muốn, tôi sẽ tạo:

• Phiên bản giao diện đẹp

• Hoặc Knockout + DataTables để thành bảng chuyên nghiệp

Chỉ cần nói:
👉 "Tạo bản đẹp"
hoặc
👉 "Thêm DataTables"

---

✨ made by AI