Kết hợp TypeScript và KnockoutJS

Chắc mọi người đã không quá xa lạ với KnockoutJS là một thư viện Javascript, với đặc điểm nổi bật giúp hỗ trờ two-way-binding, nghĩa là hỗ trợ tự động cập nhật giao diện khi có sự thay đổi phần tử đang được observable và ngược lại. Trên Viblo đã có các posts giới thiệu về KnockoutJS và TypeScript, nhưng chưa có post nào kết hợp giữa TypeScript và KnockoutJS cả. Vậy sau đây, tôi xin chia sẻ một chút kiến thức ít ỏi của mình về việc sử dụng TypeScript trong KnockoutJS. Đây có thể nói là một sự kết hợp khá hay và tường minh hơn đối với những người đã quen với Lập trình hướng đối tượng. Về cách cài đặt, do đã được đề cập trong từng bài posts về TypeScript và KnockoutJS nên chúng ta sẽ không nhắc lại nữa. Tôi sẽ đưa ra 2 cách viết code khi sử dụng TypeScript và không để chúng ta có thể dễ dàng so sánh cũng như dễ hiểu hơn. File HTML đối với 2 cách viết đều giống nhau. Ví dụ ta có 1 trang HTML sử dụng KnockoutJS như sau:

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

Đối với Text binding, file JS không sử dụng TypeScript sẽ như sau:

var viewModel = {
        firstName: ko.observable("Khanh"),
        lastName: ko.observable("Do Ngoc")
};
ko.applyBindings(viewModel);

Trong khi đó, file .ts chúng ta sẽ viết tường minh hơn.

import * as ko from "knockout";
class ViewModel {
    firstName: KnockoutObservable<string>;
    lastName: KnockoutObservable<string>;

    constructor(firstName: string, lastName: string) {
        this.firstName = ko.observable(firstName);
        this.lastName = ko.observable(lastName);
    }
}
ko.applyBindings(new ViewModel("Khanh",  "Do Ngoc"));

Ở file .ts, ta có thể hiểu mỗi 1 ViewModel là một class tương ứng với mỗi Screen. Mỗi phần tử cần binding sẽ đóng vai trò như 1 attribute của class, với giá trị khởi tạo có thể là primitive data type hoặc một gía trị observable giúp thay đổi hiển thị khi biến thay đổi giá trị. Để hiểu rõ hơn về biến Observable, ta sẽ tạo thêm một input có cùng data-bind với text hiển thị trên màn hình. Khi ta input vào một giá trị, giá trị đó sẽ được cập nhật ngay trên màn hình. Khi đó, ta chỉ cần sửa file HTML như sau:

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value:  firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

Hãy thử input và ta sẽ thấy điều mà biến Observable có thể làm được. Ở ví dụ cuối cùng về click binding để mọi người hiểu rõ hơn về TypeScript. Ta có thêm một button Update và page HTML như sau:

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<button data-bind="click: update">Update</button>

Ta sẽ code sao cho khi click vào button Update, firstName và lastName sẽ tự động được cập nhật giá trị khác. File .js sẽ được viết như sau:

var viewModel = {
        firstName: ko.observable("Khanh"),
        lastName: ko.observable("Do Ngoc"),
        update : function() {
            this.firstName("Duyen");
            this.lastName("Pham Thi");
        }
};
ko.applyBindings(viewModel);

Nếu thay thế bằng file .ts, chúng ta sẽ viết như sau:

import * as ko from "knockout";
class ViewModel {
    firstName: KnockoutObservable<string>;
    lastName: KnockoutObservable<string>;

    constructor(firstName: string, lastName: string) {
        this.firstName = ko.observable(firstName);
        this.lastName = ko.observable(lastName);
    }
    update(this: Handler, e: Event) {
        this.firstName = "Duyen";
        this.lastName = "Pham Thi";
    };
}
ko.applyBindings(new ViewModel("Khanh",  "Do Ngoc"));

Như vậy, ta có thể hiểu mỗi action click sẽ tương ứng với một method trong class để thực hiện nhiệm vụ của chúng, như trong ví dụ ta đang làm là thay đổi giá trị của firstName và lastName. Vì firstName và lastName là những attribute observable nên khi click button update giá trị cũng như hiển thị của hai biến sẽ tự động được cập nhật trên màn hình. Trên đây là một vài chia sẻ nhỏ của tôi khi viết KnockoutJS kết hợp với TypeScript. Hi vọng với vốn kiến thức ít ỏi, bài viết của tôi sẽ hữu ích cho các bạn. Bài viết còn nhiều điều sai sót hoặc thiếu kiến thức, mong mọi người nhiệt tình góp ý và bổ sung.

Tài liệu tham khảo KnockoutJS TypeScript