Knockout js là gì

     

Knockout JS là thư viên javascript giúp đỡ bạn tạo những ứng dụng linh động và quyến rũ với tầng Data model bên dưới. Ví dụ khi bạn có một giao diện và đề xuất phải cập nhật dữ liệu cồn từ View xuống model hoặc auto cập nhật lại View mọi khi Model biến hóa hoặc model với model (người ta còn hay call là 2 ways binding), thì Knockout JS để giúp đỡ bạn triển khai tính năng đó một cách đơn giản và dễ dàng và dễ dàng bảo trì sau này.

Để thực hiện thư viện này, chúng ta hãy download tại: http://knockoutjs.com/downloads/index.html

Hoặc áp dụng Bower tool: bower install knockout

Trước khi chúng ta tìm gọi Observables thì mình xin reviews sơ về quy mô MVVM.

Bạn đang xem: Knockout js là gì

Model View View-Model (MVVM) là 1 trong Design Pattern giúp đỡ bạn phát triển áp dụng linh hoạt bằng cách tách biệt ra 3 phần là Model, View cùng View Model.


Model: là phần chứa dữ liệu của áp dụng và nó được tách bóc riêng cùng với phần giao diện người tiêu dùng (UI).
View: là phần được trình diễn ra cho người dùng đầu cuối. Nó có trọng trách hiển thị tin tức từ model, người dùng hoàn toàn có thể tương tác với view (nhấn nút login trên màn hình) để truyền mệnh lệnh xuống mang lại view model để update model cùng view rất có thể được update thông tin khi trạng thái tin tức trong model biến đổi (ta nói một cách khác là cơ chế binding 2 way). Binding 2 way ko chỉ ra mắt giữa view và model, nó còn diễn ra giữa các mã sản phẩm với nhau.
View Model: là phần mô tả dữ liệu và các thao tác trên UI. để ý rằng nó không hẳn là phần tài liệu trong model và củng không hẳn là UI (Button, Checkbox, Label…) trong View, mà lại nó làm chủ phần dữ liệu mà người tiêu dùng đang tương tác.

Activating Knockout với Observables

Để hiểu về tính chất năng này bản thân sẽ trình bày một ví dụ đơn giản để chúng ta dễ dàng đọc được.

Giờ thì bọn chúng ta bước đầu nhé:


http://js/jquery-2.1.3.jshttp://js/knockout-3.3.0.jshttp://js/bootstrap.js
Chúng ta thêm các Script như bên trên để có thể sử dụng thư viên Knockout. Ở trên các chúng ta có thể thêm hoăc bỏ qua thư viện Bootstrap (Bootstrap yêu thương cầu cần có thư viện jQuery), bởi vậy các bạn nhớ include luôn jQuery nhé.

Để activating Knockout với Web Browser có thể hiểu được cú pháp của nó, chúng ta hãy chèn đoạn script như mặt dưới:


ko.applyBindings(viewModel);
Có thể để đoạn Script bên trên ở chân trang HTML hoặc đầu trang và phía bên trong DOM ready handler của jQuery


$(function() // Document is ready);
Cách thứ 2 để activate Knockout:
ko.applyBindings(, );
Dòng lệnh trên có 2 tham số, tham số đầu tiên thể hiển View model mà các bạn muốn thao tác bên trên nó, cùng với tham số thứ 2 là optional, các chúng ta có thể truyền vào hoặc không, tham số này mô tả phần DOM nhằm Knockout tra cứu thuộc tính data-bind (thuộc tính dùng để làm binding trong Knockout), với View mã sản phẩm tương ứng sẽ thao tác với phần DOM tương ứng mà bọn họ khai báo.
Ví dụ:

ko.applyBindings(viewModel, document.getElementById("https://namlinhchihoasen.com/knockout-js-la-gi/imager_4_10581_700.jpgelementID"https://namlinhchihoasen.com/knockout-js-la-gi/imager_4_10581_700.jpg));
Cách activate này được dùng khi bạn có nhu cầu dùng các View model trên đa số DOM khác nhau trên trang HTML.
Bắt đầu mình sẽ trình bày cách bind data đơn giản từ View model lên View.
Đầu tiên chúng ta cần khai báo View Model, nhằm khai báo View Model đơn giản dễ dàng trong Knockout, chúng ta chỉ yêu cầu khai báo một object javascript.

Xem thêm: Bốn Ảnh May Mắn Trong Kì Thi Giúp Bạn Vượt Vũ Môn Thành Công


var viewModel = name: ‘Truc Nguyen’, age: 23;
Sau đó khai báo một View đối kháng giản:


Name: Age:
Sau kia activate Knockout bằng cách:


ko.applyBindings(viewModel);

Observable vào KnockoutJS

Một một trong những tính năng đặc biệt quan trọng của Knockout là tự động hóa cập nhật dữ liệu lên View khi những thuộc tính trong View model thay đổi. Chắn chắn chắn chúng ta đang thắc mắc làm sao View có thể biết mà update lại dữ liệu khi View mã sản phẩm thay đổi, thì câu trả lời đó là Observables. Tất cả nghĩa là họ cần khai báo trực thuộc tính mà bọn họ có nhu cầu tự động hóa cập nhật dữ liệu lên View là observable, do observable là một đối tượng người sử dụng javascript đặc trưng nên những thuộc tính làm sao được khai báo là observable phần đông sẽ thông báo cho những thuộc tính binding trên View về sự biến đổi đó và tự động hóa cập nhật lại tài liệu lên View.var viewModel = name: ko.observable("https://namlinhchihoasen.com/knockout-js-la-gi/imager_4_10581_700.jpgTruc Nguyen"https://namlinhchihoasen.com/knockout-js-la-gi/imager_4_10581_700.jpg), age: ko.observable(23);Trong View bọn họ không cần biến đổi gì, sự khác biệt là lúc name với age cụ đổi, thì tài liệu trên View sẽ tiến hành cập tốt nhất tương ứng. Mình đã trình bày dứt Knockout và Observables.

Cám ơn các bạn đã theo dõi.


Share this:


Thích bài này:


Thích Đang tải...

Nhãn: Knockout JS

Trả lời diệt trả lời


Nhập phản hồi ở đây...

Điền thông tin vào ô dưới đây hoặc nhấp vào một hình tượng để đăng nhập:


*

Email (bắt buộc) (Địa chỉ của khách hàng được che kín)
Tên (bắt buộc)
Trang web
*

Bạn đang comment bằng tài khoản namlinhchihoasen.com.com(Đăng xuất/Thay đổi)


*

Bạn đang phản hồi bằng tài khoản Twitter(Đăng xuất/Thay đổi)


*

Bạn đang comment bằng thông tin tài khoản Facebook(Đăng xuất/Thay đổi)


Hủy bỏ

Connecting lớn %s


Nhắc e-mail khi có bình luận mới.

Nhắc e-mail khi có bài viết mới.


Δ


Các nội dung bài viết mới nhất


Blog trên namlinhchihoasen.com.com.

Xem thêm: Hướng Dẫn Cách Bật Đèn Bàn Phím Laptop Asus Vivobook 15, Cách Bật Đèn Bàn Phím Laptop Asus


Trang này áp dụng cookie. Mày mò cách kiểm soát điều hành ở trong:Chính Sách Cookie
Theo dõiĐang theo dõi
Có 252 tín đồ theo dõi
Theo dõi ngay
Đang sở hữu Bình luận...
Thư điện tử (Bắt buộc)Tên (Bắt buộc)Trang web
%d bạn thích bài bác này: