Knockout Js Là Gì

     
Knockout JS là thư viên javascript giúp bạn tạo đông đảo ứng dụng biến hóa năng động và sexy nóng bỏng với tầng Data model bên dưới. Ví dụ khi chúng ta có một bối cảnh và cần được update tài liệu động từ View xuống model hoặc tự động hóa hóa update lại View từng khi model biến hóa hoặc mã sản phẩm với mã sản phẩm ( người ta còn hay điện thoại tư vấn là 2 ways binding ), thì Knockout JS sẽ giúp bạn tiến hành tính năng kia một cách 1-1 thuần và dễ ợt bảo dưỡng sau này .Để áp dụng thư viện này, những bạn hãy tải về trên : http://knockoutjs.com/downloads/index.htmlHoặc áp dụng Bower tool : bower install knockout

Trước khi bọn họ tìm đọc Observables thì bản thân xin giới thiệu sơ về quy mô MVVM.

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

Bạn vẫn xem: Knockout js là gì


Bạn đang đọc: giới thiệu Về Knockout Js Là Gì, thiết kế Knockout


Model View View-Model ( MVVM ) là một trong những Design Pattern khiến cho bạn tăng trưởng áp dụng linh động bằng cách tách biệt ra 3 phần là Model, View cùng View mã sản phẩm .Model: là phần chứa dữ liệu của áp dụng và nó được tách bóc riê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, bạn dùng có thể tương tác cùng với view (nhấn nút login bên trên màn hình) nhằm truyền bổn phận xuống mang lại view mã sản phẩm để cập nhật model với view có thể được cập nhật thông tin lúc trạng thái tin tức trong model biến đổi (ta còn được gọi là cơ chế binding 2 way). Binding 2 way ko chỉ ra mắt giữa view cùng 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ả tài liệu và các thao tác làm việc trên UI. để ý rằng nó chưa phải là phần dữ liệu trong model và củng chưa hẳn là UI (Button, Checkbox, Label…) trong View, cơ mà nó làm chủ phần dữ liệu mà người dùng đang tương tác. Model : là phần cất tài liệu của áp dụng và nó được bóc tách riêng cùng với phần giao diện người dùng ( UI ). View : là phần được miêu tả ra cho người dùng đầu cuối. Nó có nhiệm vụ hiển thị thông tin từ Mã Sản Phẩm, người tiêu dùng hoàn toàn rất có thể tương tác cùng với view ( nhận nút login trên màn hình hiển thị ) nhằm truyền nhiệm vụ xuống cho view model để update mã sản phẩm và view hoàn toàn hoàn toàn có thể được update thông tin khi trạng thái tin tức trong Mã Sản Phẩm biến đổi ( ta còn được gọi là chế độ binding 2 way ). Binding 2 way ko riêng gì diễn ra giữa view với Mã Sản Phẩm, nó còn diễn ra giữa những mã sản phẩm với nhau. View mã sản phẩm : là phần diễn đạt tài liệu với những thao tác làm việc trên UI. Lưu ý rằng nó không hẳn là phần tư liệu trong model và củng không hẳn là UI ( Button, Checkbox, Label … ) vào View, nhưng mà nó cai quản trị phần tài 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 mình sẽ trình bày một ví dụ đơn thuần để đều bạn thuận tiện hiểu được .Giờ thì vớ cả chúng ta mở màn nhé :

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

Xem thêm: Liên Kết Trong Phân Tử H2O Là Liên Kết, Please Wait

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

ko.applyBindings(viewModel);Có thể để đoạn Script trên ở dưới 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ứ hai để activate Knockout:ko.applyBindings(, );Dòng lệnh trên gồm 2 tham số, tham số trước tiên thể hiển View model mà các bạn muốn thao tác trên nó, với tham số thứ 2 là optional, các chúng ta cũng có thể truyền vào hoặc không, thông số này mô tả phần DOM để Knockout search thuộc tính data-bind (thuộc tính dùng để binding trong Knockout), với View mã sản phẩm tương ứng sẽ thao tác làm việc với phần DOM tương xứng mà họ khai báo.Ví dụ:


ko.applyBindings(viewModel, document.getElementById(“elementID”));Cách activate này được sử 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 bản thân sẽ trình diễn cách bind data dễ dàng và đơn giản từ View mã sản phẩm lên View.Đầu tiên bọn họ cần khai báo View Model, để khai báo View Model đơn giản trong Knockout, chúng ta chỉ phải khai báo một object javascript.

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

Name: Age: tiếp đến activate Knockout bằng cách:


ko.applyBindings(viewModel);

Observable vào KnockoutJS

Một giữa 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 vào View mã sản phẩm thay đổi. Dĩ nhiên chắn các bạn đang thắc mắc làm sao View 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. Bao gồm nghĩa là họ cần khai báo trực thuộc tính mà họ có nhu cầu auto cập nhật tài liệu lên View là observable, vị observable là một đối tượng người sử dụng javascript đặc biệt nên các thuộc tính nào được khai báo là observable các sẽ thông báo cho các thuộc tính binding trên View về sự thay đổi đó và auto cập nhật lại dữ liệu lên View.var viewModel = name: ko.observable(“Truc Nguyen”), age: ko.observable(23);Trong View họ không cần chuyển đổi gì, sự khác hoàn toàn là khi name và age cố kỉnh đổi, thì dữ liệu trên View sẽ được cập độc nhất vô nhị tương ứng. Tôi đã trình bày kết thúc Knockout với Observables.

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

Xem thêm: Top 9 Bài Cảm Nghĩ Của Em Về Nhân Vật Phương Định Ngắn Hay Nhất


Share this:

Like this:

Số lượt ưa thích Đang tải…

Nhãn: Knockout JS

Trả lời bỏ trả lời

Nhập phản hồi của chúng ta tại đây…Mời các bạn điền tin tức vào ô tiếp sau đây hoặc kích vào trong 1 hình tượng để singin :

*
Thư điện tử (bắt buộc) (Địa chỉ của khách hàng được đậy kín)Tên (bắt buộc)Trang web

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

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

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

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

Hủy bỏ

Connecting to lớn %s


Thông báo mang lại tôi bằng e-mail khi bao gồm phản hồi new .Thông báo mang lại tôi bằng thư điện tử khi có bài bác đăng bắt đầu .

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

Blog trên ucancook.vn.com .Write a Comment…


Thư điện tử (Required)Tên (Required)Trang webĐang cài Bình luận…Phản hồi×Privacy & Cookies: This site uses cookies. By continuing lớn use this website, you agree lớn their use. To find out more, including how lớn control cookies, see here:Cookie Policy %d bloggers lượt thích this: