KnockoutJS – Hãy code theo cách của bạn
Giới lập trình front-end ngày nay đã khá quen thuộc với Angular JS và ReactJS. 2 framework do Google và Facebook phát triển và ngày càng trở nên phổ biến.
Tuy nhiên, hai nền tảng này cũng đang có sự cạnh tranh nhau rất quyết liệt khiến cho developer không biết nên lựa chọn nền tảng nào để phát triển ứng dụng cho mình.
Ngoài ra, AngularJS và Reacts đòi hỏi developer phải có kiến thức vững vàng về JavaScript như xử lý object, string, cũng như mô hình MVC để có thể tiếp cận và sử dụng thành thạo.
Bài viết này muốn giới thiệu một hướng đi khác, đơn giản hơn, dễ tiếp cận hơn trong lập trình front-end đó là Knockout
Knockout là gì?
Nói đến từ Knockout, chắc hẳn bạn sẽ nghĩ đến coding theo phong cách của một boxer, nhưng thực ra thì không phải thế.
Knockout JS là thư viên javascript giúp bạn tạo các ứng dụng linh hoạt và mượt mà (responsive display). Với Knockout, bạn có thể làm cho giao diện của ứng dụng được update tự động một cách đơn giản, dễ dàng khi có thay đổi data.
Vì sao nên sử dụng Knockout?
Knockout đem lại cho bạn rất nhiều sự tiện lợi
Knockout là một Pure Javascript library nên hoàn toàn tương thích với mọi trình duyệt
Dung lượng nhỏ, đơn giản nên không ảnh hưởng tới performance của trang web
Tài liệu hướng dẫn guideline khá đầy đủ, Knockout là một framework dễ học, dễ tiếp cận nhờ tính đơn giản của nó.
Tóm lại, Knockout là framework rất đáng để tìm hiểu.Kiến trúc và nguyên tắc hoạt động
Knockout được phát triển dựa trên mô hình Model-View-View Model (MVVM).
Trong mô hình này
Model: là phần chứa dữ liệu của ứng dụng và nó được tách riêng với phần giao diện người dùng (UI).
View: là phần giao diện người dùng như layout, GUI, những thứ hiển thị trên màn hình cho user sử dụng
View Model: là phần mô tả trạng thái của dữ liệu trên model, là trung gian giữa View và Model, quản lý phần dữ liệu mà người dùng đang tương tác. MVVM sử dụng cơ chế đặc biệt là Data Binding để cập nhật dữ liệu từ Model vào GUI component như TextBox, Button mà không cần sử dụng code-behind như thông thường.
Không phức tạp như Angular hay React, kiến trúc của Knockout rất đơn giản chỉ bao gồm 3 core feature
Observables là một Java objects của Knockout có tác dụng thông báo cho UI biết khi View Model thay đổi
Declarative Bindings: Hiểu đơn giản là Knockout gán value của một biến Javascript vào GUI ví dụ như textbox, button. Ví dụ:
<input type="checkbox" data-bind="{ personObj.hasStuff }" />
Khi data personObj.hasStuff thay đổi value thì tự động được cấp nhật vào checkbox mà không cần code thêm xử lý change nào
Templating: Tập hợp DOM elements có thể dùng lại nhiều lần.
Nguyên tắc hoạt động của Knockout cũng rất đơn giản, dựa và cơ chế Data Binding của mô hình MVVM.
Có thể xem scenario sau để hiểu được cơ chế hoạt động của Knockout
User select Ticket từ dropdown menu
Một Event drop down change sẽ fire một binder
Binder tìm Action Logic tương ứng trong View Model và thực thi.
Action Logic truy cập vào Model Layer để lấy dữ liệu và cập nhật vào View Model (Dữ liệu ở đây là tên ticket class)
View Model thông báo cho binder biết sự thay đổi tên ticket class
Binder sẽ cập nhật vào GUI là text content nội dung lấy được từ bước 4
KnockoutJS case Study
Phần này ta sẽ bắt đầu với một case study đơn giản dùng KnockoutJS
Phát triển một trang web cho phép Fsofter lựa chọn phương án làm việc của mình.
Yêu cầu
User được lựa chọn phương án làm việc khi trở thành nhân viên Fsoft.
OT
ON
Không chịu OT, ON thì nghỉ (Fire)
Step 1. Cài đặt KnockoutJSThủ tục cài đặt Knockout không đơn giản mà là quá đơn giản.
Download KnokoutJS ở đây và include vào source code của bạn
<script type='text/javascript' src='knockout-2.2.0.js'></script>
Ngoài ra cũng cần cài đặt thêm JQuery
<script type="text/javascript" src="Scripts/jquery-3.1.1.js"></script>
Step 2. Tạo giao diện
Giao diện sẽ bao gồm 1 dropdown box cho phép lựa chọn phương án làm việc. Value của dropdown box được lưu trong data model
<body>
<p> <select data-bind="options: working,
optionsCaption: 'Choose...',
optionsText: 'name',
value: chosenWorkStyle">
</select>
<p data-bind="with: chosenWorkStyle"> <b data-bind="text: name"></b>
</p>
</body>
Chú ý đoạn xử lý data-bind trong code trên, đây chính là xử lý databinding của Knockout. Cho phép cập nhật data vào GUI
Step 3, Tạo Model
Tạo ra một Data Model để chứa dữ liệu, trường working chứa dữ liệu để bind vào dropdown box, trường name dùng để bind vào label
Data Model ở đây thực chất là một JavaScript object
function WorkingModel() {
this.working = [
{ name: "OT"},
{ name: "ON" },
{ name: "Fire" }
];
this.chosenWorkStyle = ko.observable();
}
Chú ý xử lý ko.observable(). Đây là xử lý giúp Knockout biết được khi nào thì View Model thay đổi.
Step 4, Apply Data Binding
Gọi api applyBindings để để thực hiện
$(document).ready(function () {
ko.applyBindings(new WorkingModel());
});
Chú ý xử lý này chỉ hoạt động khi toàn bộ trang web được load xong.
Bây giờ run ứng dụng, mỗi khi bạn thay đổi value trong dropdown box, thì trường text tự động cập nhật, mà không cần phải code thêm xử lý event change như thông thường.
Lời kết
Có thể nói KnockoutJs là một framework tuy nhỏ mà lại có võ. Với KnockoutJS, developer có thể thực hiện các kỹ thuật cao cấp hơn như binding dữ liệu, cập nhật dữ liệu dựa vào thao tác người dùng, từ trường này tự động sang các trường liên quan, KO (Key Observing – quan sát sự thay đổi theo key).
Hãy sử dụng Knockout, và code theo cách của 1 boxer.