+ KnockoutJS là 01 thư viện JavaScript đơn giản hoạt động theo mô hình Model-View-ViewModel (MVVM)
+ KnockoutJS xuất thân từ đại gia đình danh giá (đại học MIT - Huê Kỳ)
+ Trang web official của KnockoutJS: https://knockoutjs.com/
Ưu điểm của KnockoutJS:
+ Dễ dàng liên kết các phần tử DOM với data model bằng cú pháp ngắn gọn, dễ đọc (Declarative Bindings)
+ Khi trạng thái (state) data model của bạn thay đổi, giao diện người dùng của bạn sẽ tự động cập nhật (Automatic UI Refresh)
+ Thiết lập hoàn toàn các chuỗi quan hệ giữa data model, để chuyển đổi và kết hợp nó (Dependency Tracking).
+ Nhanh chóng tạo các giao diện người dùng phức tạp, lồng nhau như một hàm trong data model của bạn (Templating)
Cách cài đặt KnockoutJS:
giống y hệt cài đặt JQuery, ở đây mình cài từ cdnjs cho tiện:
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
Chú ý: nên dùng kèm JQuery.
Bài demo Hello World của KnockoutJS:
+ Tạo tập tin index.html<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>+ Trong cặp thẻ <body>...</body> thêm vào đoạn mã sau:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
<script>
// Đây là data model
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.pureComputed(function() {
// Knockout tự động lần theo vết của các dependencies. KO nghĩa là Key Observing (quan sát sự thay đổi theo key)
// Nó biết hàm fullName() thay đổi theo firstName và lastName, bỏi vì các biến này đươc gọi khi tính toán fullName.
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Lophocvitinh.com", "drM")); // Knockout hoạt động nhờ cái này
</script>
Không có nhận xét nào:
Đăng nhận xét