Knockout JS là thư viên javascript khiến cho bạn tạo các ứng dụng linh động và mượt mà với tầng Data model bên dưới. Ví dụ khi chúng ta có một bối cảnh và đề nghị phải update dữ liệu động từ View xuống model hoặc tự động hóa cập nhật lại View mỗi khi Model chuyển đổi hoặc model với model (người ta còn hay gọi là 2 ways binding), thì Knockout JS sẽ giúp đỡ bạn tiến hành tính năng đó một cách dễ dàng và dễ dàng dàng gia hạn 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 sử dụng Bower tool: bower install knockout

Trước khi chúng ta tìm hiểu Observables thì bản thân xin trình làng sơ về quy mô MVVM.

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

Model View View-Model (MVVM) là 1 Design Pattern giúp cho bạn phát triển ứng dụng linh hoạt bằng phương pháp tách biệt ra 3 phần là Model, View và View Model.


Model: là phần chứa tài liệu của vận dụng và nó được tách riêng cùng với phần giao diện người dùng (UI).
View: là phần được trình diễn ra cho người dùng đầu cuối. Nó có trách nhiệm hiển thị thông tin từ model, người dùng hoàn toàn có thể tương tác với view (nhấn nút login bên trên màn hình) để truyền mệnh lệnh xuống mang lại view model để cập nhật model cùng view có thể được cập nhật thông tin khi trạng thái tin tức trong model thay đổ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 cùng model, nó còn ra mắt giữa các model với nhau.
View Model: là phần tế bào tả dữ liệu và các thao tác trên UI. Xem xét rằng nó không hẳn là phần dữ liệu trong mã sản phẩm và củng chưa phải là UI (Button, Checkbox, Label…) vào View, mà lại nó thống trị phần tài liệu mà người tiêu dùng đang tương tác.

Activating Knockout cùng Observables

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

Giờ thì bọn chúng ta ban đầ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 để hoàn toàn có thể sử dụng thư viên Knockout. Ở trên các bạn cũng có thể thêm hoăc bỏ qua mất thư viện Bootstrap (Bootstrap yêu cầu cần có thư viện jQuery), bởi vì vậy chúng ta nhớ include luôn jQuery nhé.

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


ko.applyBindings(viewModel);
Có thể nhằm đoạn Script trên ở dưới trang HTML hoặc đầu trang và 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 tất cả 2 tham số, tham số thứ nhất thể hiển View model mà các bạn có nhu cầu thao tác bên trên nó, với tham số thứ 2 là optional, các bạn cũng có thể truyền vào hoặc không, tham số này biểu thị phần DOM nhằm Knockout tìm kiếm thuộc tính data-bind (thuộc tính dùng để làm binding vào Knockout), với View model tương ứng sẽ thao tác làm việc với phần DOM khớp ứng mà họ khai báo.
Ví dụ:

ko.applyBindings(viewModel, document.getElementById("https://heavencrossrecords.net/knockout-js-la-gi/imager_5_268_700.jpgelementID"https://heavencrossrecords.net/knockout-js-la-gi/imager_5_268_700.jpg));
Cách activate này được dùng khi bạn muốn dùng nhiều View model trên phần nhiều DOM khác nhau trên trang HTML.
Bắt đầu mình sẽ trình diễn cách bind data đơn giản và dễ dàng từ View model lên View.
Đầu tiên bọn họ cần khai báo View Model, để khai báo View Model dễ dàng và đơn giản trong Knockout, chúng ta chỉ đề nghị khai báo một object javascript.
var viewModel = name: ‘Truc Nguyen’, age: 23;
Sau kia khai báo một View đơn giản:


Name: Age:
Sau kia activate Knockout bởi cách:


ko.applyBindings(viewModel);

Observable vào KnockoutJS

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

Cám ơn chúng ta đã theo dõi.


Share this:


Thích bài xích này:


Thích Đang tải...

Nhãn: Knockout JS

Trả lời hủy trả lời


Nhập comment ở đây...

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


*

Email (bắt buộc) (Địa chỉ của công ty được giấu kín)
Tên (bắt buộc)
Trang web
*

Bạn đang bình luận bằng thông tin tài khoản heavencrossrecords.net.com(Đăng xuất/Thay đổi)


*

Bạn đang bình luận bằng thông tin tài khoản Google(Đăng xuất/Thay đổi)


*

Bạn đang phản hồi bằng thông tin 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 khổng lồ %s


Nhắc e-mail khi có phản hồi mới.

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


Δ


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


Tạo một website miễn giá tiền hoặc 1 blog với heavencrossrecords.net.com.

Xem thêm: Dimsum Là Gì? Những Món Dimsum Nhất Định Phải Thử Một Lần Trong Đời


Trang này áp dụng cookie. Mày mò cách điều hành và kiểm soát ở 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 cài Bình luận...
Thư điện tử (Bắt buộc)Tên (Bắt buộc)Trang web
%d fan thích bài bác này: