KnockoutJS - Có thể quan sát
KnockoutJS được xây dựng dựa trên 3 khái niệm quan trọng sau đây.
Các khả năng quan sát và theo dõi sự phụ thuộc giữa chúng - các phần tử DOM được kết nối với ViewModel thông qua 'data-bind'. Họ trao đổi thông tin thông qua Observables. Điều này tự động xử lý theo dõi phụ thuộc.
Liên kết khai báo giữa giao diện người dùng và ViewModel - các phần tử DOM được kết nối với ViewModel thông qua khái niệm 'data-bind'.
Tạo khuôn để tạo các thành phần có thể sử dụng lại - Tạo khuôn cung cấp một cách mạnh mẽ để tạo các ứng dụng web phức tạp.
Chúng ta sẽ nghiên cứu về Observables trong chương này.
Như tên chỉ định, khi bạn khai báo dữ liệu / thuộc tính ViewModel là Có thể quan sát, mọi sửa đổi dữ liệu mỗi lần sẽ tự động được phản ánh ở tất cả các vị trí dữ liệu được sử dụng. Điều này cũng bao gồm làm mới các phụ thuộc liên quan. KO đảm nhận những điều này và không cần phải viết thêm mã để đạt được điều này.
Sử dụng Observable, sẽ rất dễ dàng làm cho giao diện người dùng và ViewModel giao tiếp động.
Cú pháp
Bạn chỉ cần khai báo thuộc tính ViewModel với hàm ko.observable() để làm cho nó có thể quan sát được.
this.property = ko.observable('value');Thí dụ
Hãy xem ví dụ sau minh họa việc sử dụng Observable.
<!DOCTYPE html>
<head>
<title>KnockoutJS Observable Example</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<!-- This is called "view" of HTML markup that defines the appearance of UI -->
<p>Enter your name: <input data-bind = "value: yourName" /></p>
<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>
<script>
<!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->
function AppViewModel() {
this.yourName = ko.observable("");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>Dòng sau dành cho hộp nhập liệu. Có thể thấy, chúng tôi đã sử dụng thuộc tính data-bind để ràng buộc giá trị yourName với ViewModel.
<p>Enter your name: <input data-bind = "value: yourName" /> <p>Dòng sau chỉ in giá trị của yourName. Lưu ý rằng ở đây kiểu data-bind là văn bản vì chúng ta chỉ đọc giá trị.
<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>Trong dòng sau, ko.observable theo dõi biến yourName để biết bất kỳ sửa đổi nào trong dữ liệu. Sau khi có sửa đổi, các địa điểm tương ứng cũng được cập nhật giá trị đã sửa đổi. Khi bạn chạy mã sau, một hộp nhập liệu sẽ xuất hiện. Như và khi bạn cập nhật hộp nhập đó, giá trị mới sẽ được phản ánh hoặc làm mới ở những nơi mà nó được sử dụng.
this.yourName = ko.observable("");Đầu ra
Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -
Lưu mã trên vào first_observable_pgm.htm tập tin.
Mở tệp HTML này trong trình duyệt.
Nhập tên là Scott và quan sát rằng tên được phản ánh trong đầu ra.
Việc sửa đổi dữ liệu có thể diễn ra từ giao diện người dùng hoặc từ ViewModel. Bất kể dữ liệu được thay đổi từ đâu, UI và ViewModel vẫn giữ đồng bộ hóa giữa chúng. Điều này làm cho nó trở thành một cơ chế ràng buộc hai chiều. Trong ví dụ trên, khi bạn thay đổi tên của mình trong hộp nhập liệu, ViewModel sẽ nhận được một giá trị mới. Khi bạn thay đổi thuộc tính YourName từ bên trong ViewModel, thì giao diện người dùng sẽ nhận được một giá trị mới.
Đọc và Viết bảng quan sát
Bảng sau liệt kê các thao tác đọc và ghi có thể được thực hiện trên Observables.
| Sr.No. | Đọc / ghi hoạt động & cú pháp |
|---|---|
| 1 | Read Để đọc giá trị, chỉ cần gọi thuộc tính Observable không có các tham số như: AppViewModel.yourName (); |
| 2 | Write Để ghi / cập nhật giá trị trong thuộc tính Observable, chỉ cần chuyển giá trị mong muốn vào tham số như: AppViewModel.yourName ('Bob'); |
| 3 | Write multiple Nhiều thuộc tính ViewModel có thể được cập nhật trong một hàng với sự trợ giúp của cú pháp chuỗi như: AppViewModel.yourName ('Bob'). YourAge (45); |
Mảng có thể quan sát
Khai báo có thể quan sát xử lý các sửa đổi dữ liệu của một đối tượng. ObservableArray hoạt động với tập hợp các đối tượng. Đây là một tính năng rất hữu ích khi bạn đang xử lý các ứng dụng phức tạp chứa nhiều loại giá trị và thay đổi trạng thái của chúng thường xuyên dựa trên hành động của người dùng.
Cú pháp
this.arrayName = ko.observableArray(); // It's an empty arrayMảng có thể quan sát chỉ theo dõi các đối tượng nào trong đó được thêm vào hoặc loại bỏ. Nó không thông báo nếu các thuộc tính của đối tượng riêng lẻ bị sửa đổi.
Khởi tạo nó lần đầu tiên
Bạn có thể khởi tạo mảng của mình và đồng thời bạn có thể khai báo nó là có thể quan sát được bằng cách chuyển các giá trị ban đầu cho hàm tạo như sau.
this.arrayName = ko.observableArray(['scott','jack']);Đọc từ mảng có thể quan sát
Bạn có thể truy cập các phần tử mảng có thể quan sát như sau.
alert('The second element is ' + arrayName()[1]);Các hàm ObservableArray
KnockoutJS có tập hợp các hàm mảng có thể quan sát của riêng nó. Chúng thuận tiện vì -
Các chức năng này hoạt động trên tất cả các trình duyệt.
Các chức năng này sẽ tự động xử lý theo dõi sự phụ thuộc.
Cú pháp rất dễ sử dụng. Ví dụ: để chèn một phần tử vào một mảng, bạn chỉ cần sử dụng arrayName.push ('value') thay vì arrayName (). Push ('value').
Sau đây là danh sách các phương thức Mảng quan sát khác nhau.
| Sr.No. | Phương pháp & Mô tả |
|---|---|
| 1 | push ('giá trị') Chèn một mục mới vào cuối mảng. |
| 2 | pop () Loại bỏ mục cuối cùng khỏi mảng và trả lại nó. |
| 3 | unshift ('giá trị') Chèn một giá trị mới vào đầu mảng. |
| 4 | shift () Loại bỏ mục đầu tiên khỏi mảng và trả lại nó. |
| 5 | đảo ngược() Đảo ngược thứ tự của mảng. |
| 6 | sắp xếp () Sắp xếp các mục mảng theo thứ tự tăng dần. |
| 7 | mối nối (chỉ mục đầu, chỉ mục cuối) Chấp nhận 2 tham số - start-index và end-index - loại bỏ các mục bắt đầu từ chỉ mục đầu đến cuối và trả về chúng dưới dạng một mảng. |
| số 8 | indexOf ('giá trị') Hàm này trả về chỉ số của lần xuất hiện đầu tiên của tham số được cung cấp. |
| 9 | lát (chỉ mục đầu, chỉ mục cuối) Phương thức này cắt ra một phần của mảng. Trả về các mục từ chỉ mục đầu đến chỉ mục cuối. |
| 10 | xóa tất cả() Loại bỏ tất cả các mục và trả về chúng dưới dạng một mảng. |
| 11 | loại bỏ ('giá trị') Loại bỏ các mục phù hợp với tham số và trả về dưới dạng một mảng. |
| 12 | remove (function (item) {condition}) Loại bỏ các mục thỏa mãn điều kiện và trả về chúng dưới dạng một mảng. |
| 13 | loại bỏ ([bộ giá trị]) Loại bỏ các mục phù hợp với một bộ giá trị nhất định. |
| 14 | destroyAll() Đánh dấu tất cả các mục trong một mảng có thuộc tính _destroy với giá trị true. |
| 15 | destroy('value') Tìm kiếm một mục bằng tham số và đánh dấu mục đó bằng thuộc tính đặc biệt _destroy với giá trị true. |
| 16 | destroy(function(item) { condition}) Tìm tất cả các mục thỏa mãn điều kiện, đánh dấu chúng bằng thuộc tính _destroy với giá trị thực. |
| 17 | destroy([set of values]) Tìm các mục phù hợp với một bộ giá trị nhất định, đánh dấu chúng là _destroy với giá trị thực. |
Note - Hủy và hủy Tất cả các chức năng từ ObservableArrays hầu hết chỉ dành cho các nhà phát triển 'Ruby on Rails'.
Khi bạn sử dụng phương thức hủy, các mục tương ứng không thực sự bị xóa khỏi mảng tại thời điểm đó nhưng được ẩn bằng cách đánh dấu chúng bằng thuộc tính _destroy có giá trị thực để giao diện người dùng không thể đọc chúng. Các mục được đánh dấu là _destroy bằng true sẽ bị xóa sau đó trong khi xử lý biểu đồ đối tượng JSON.