KnockoutJS - Liên kết khai báo

Liên kết khai báo trong KnockoutJS cung cấp một cách mạnh mẽ để kết nối dữ liệu với giao diện người dùng.

Điều quan trọng là phải hiểu mối quan hệ giữa các ràng buộc và các Quan sát. Về mặt kỹ thuật, hai cái này khác nhau. Bạn có thể sử dụng đối tượng JavaScript bình thường vì ViewModel và KnockoutJS có thể xử lý ràng buộc của View một cách chính xác.

Không có Observable, thuộc tính từ UI sẽ chỉ được xử lý lần đầu tiên. Trong trường hợp này, nó không thể cập nhật tự động dựa trên bản cập nhật dữ liệu cơ bản. Để đạt được điều này, các ràng buộc phải được tham chiếu đến các thuộc tính Có thể quan sát.

Cú pháp ràng buộc

Đóng gáy gồm 2 mục, ràng buộc name và value. Sau đây là một ví dụ đơn giản -

Today is : <span data-bind = "text: whatDay"></span>

Ở đây, văn bản là tên liên kết và WhatDay là giá trị liên kết. Bạn có thể có nhiều ràng buộc được phân tách bằng dấu phẩy, như thể hiện trong cú pháp sau.

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

Tại đây, giá trị được cập nhật sau mỗi lần nhấn phím.

Giá trị ràng buộc

Giá trị ràng buộc có thể là một single value, literal, một variable hoặc có thể là một JavaScriptbiểu hiện. Nếu liên kết đề cập đến một số biểu thức hoặc tham chiếu không hợp lệ, thì KO sẽ tạo ra lỗi và ngừng xử lý liên kết.

Sau đây là một số ví dụ về ràng buộc.

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

Lưu ý những điểm sau:

Khoảng trắng không tạo ra bất kỳ sự khác biệt nào.
Bắt đầu từ KO 3.0, bạn có thể bỏ qua giá trị ràng buộc sẽ cung cấp cho ràng buộc một giá trị không xác định.

Bối cảnh ràng buộc

Dữ liệu đang được sử dụng trong các ràng buộc hiện tại có thể được tham chiếu bởi một đối tượng. Đối tượng này được gọi làbinding context.

Hệ thống phân cấp ngữ cảnh được tạo và quản lý bởi KnockoutJS tự động. Bảng sau liệt kê các loại ngữ cảnh ràng buộc khác nhau do KO cung cấp.

Sr.No.	Mô tả và loại ngữ cảnh ràng buộc
1	$root Điều này luôn đề cập đến ViewModel cấp cao nhất. Điều này giúp bạn có thể truy cập các phương thức cấp cao nhất để thao tác với ViewModel. Đây thường là đối tượng, được chuyển tới ko.applyBindings.
2	$data Tài sản này rất giống thistừ khóa trong đối tượng Javascript. Thuộc tính $ data trong ngữ cảnh ràng buộc tham chiếu đến đối tượng ViewModel cho ngữ cảnh hiện tại.
3	$index Thuộc tính này chứa chỉ mục của một mục hiện tại của một mảng bên trong vòng lặp foreach. Giá trị của $ index sẽ tự động thay đổi khi và khi cập nhật mảng có thể quan sát bên dưới. Rõ ràng, ngữ cảnh này chỉ có sẵn choforeach ràng buộc.
4	$parent Thuộc tính này đề cập đến đối tượng ViewModel mẹ. Điều này rất hữu ích khi bạn muốn truy cập các thuộc tính ViewModel bên ngoài từ bên trong của một vòng lặp lồng nhau.
5	$parentContext Đối tượng ngữ cảnh được ràng buộc ở cấp cha được gọi là $parentContext. Điều này khác với$parent. $ cha tham chiếu đến dữ liệu. Trong khi, $ parentContext đề cập đến ngữ cảnh ràng buộc. Ví dụ: bạn có thể cần truy cập chỉ mục của mục ngoại cảnh từ ngữ cảnh bên trong.
6	$rawdata Bối cảnh này giữ giá trị ViewModel thô trong tình huống hiện tại. Điều này giống với dữ liệu $ nhưng sự khác biệt là, nếu ViewModel được bao bọc trong Observable, thì dữ liệu $ chỉ trở thành không được gói. ViewModel và $ rawdata trở thành dữ liệu có thể quan sát thực tế.
7	$component Ngữ cảnh này được sử dụng để tham chiếu đến ViewModel của thành phần đó, khi bạn đang ở bên trong một thành phần cụ thể. Ví dụ: bạn có thể muốn truy cập một số thuộc tính từ ViewModel thay vì dữ liệu hiện tại trong phần mẫu của thành phần.
số 8	$componentTemplateNodes Điều này đại diện cho một mảng các nút DOM được chuyển đến thành phần cụ thể đó khi bạn ở trong một mẫu thành phần cụ thể.

Các điều khoản sau cũng có sẵn trong ràng buộc nhưng không thực sự là ngữ cảnh ràng buộc.

$context - Đây không là gì ngoài đối tượng ngữ cảnh ràng buộc hiện có.
$element - Đối tượng này tham chiếu đến một phần tử trong DOM trong ràng buộc hiện tại.

Làm việc với Văn bản và Hình thức

Sau đây là danh sách các loại ràng buộc do KO cung cấp để xử lý các hình thức văn bản và hình ảnh.

Sr.No.	Loại ràng buộc & Cách sử dụng
1	hiển thị: Để hiển thị hoặc ẩn phần tử DOM HTML tùy thuộc vào các điều kiện nhất định.
2	văn bản: Để đặt nội dung của một phần tử HTML DOM.
3	html: Để đặt nội dung đánh dấu HTML của phần tử DOM.
4	css: Để áp dụng các lớp CSS cho một phần tử.
5	phong cách: Để xác định thuộc tính kiểu nội tuyến của một phần tử.
6	đính kèm: Để thêm động các thuộc tính vào một phần tử.

Làm việc với các ràng buộc luồng kiểm soát

Sau đây là danh sách các loại Ràng buộc Luồng Kiểm soát do KO cung cấp.

Sr.No.	Loại ràng buộc & Cách sử dụng
1	foreach: Trong liên kết này, mỗi mục mảng được tham chiếu trong đánh dấu HTML trong một vòng lặp.
2	nếu: Nếu điều kiện là đúng, thì đánh dấu HTML đã cho sẽ được xử lý. Nếu không, nó sẽ bị xóa khỏi DOM.
3	ifnot: Phủ định của Nếu. Nếu điều kiện là đúng, thì đánh dấu HTML đã cho sẽ được xử lý. Nếu không, nó sẽ bị xóa khỏi DOM.
4	với: Liên kết này được sử dụng để ràng buộc các phần tử con của một đối tượng trong ngữ cảnh của đối tượng được chỉ định.
5	thành phần: HOẶC thành phần: Liên kết này được sử dụng để chèn một thành phần vào các phần tử DOM và truyền các tham số tùy chọn.

Làm việc với các ràng buộc trường biểu mẫu

Sau đây là danh sách các loại Trường mẫu liên kết được cung cấp bởi KO.

Sr.No.	Loại ràng buộc & Cách sử dụng
1	bấm vào: Liên kết này được sử dụng để gọi một hàm JavaScript được liên kết với phần tử DOM dựa trên một lần nhấp.
2	sự kiện: Liên kết này được sử dụng để lắng nghe các sự kiện DOM được chỉ định và gọi các hàm xử lý liên quan dựa trên chúng.
3	đệ trình: Liên kết này được sử dụng để gọi một hàm JavaScript khi phần tử DOM được liên kết được gửi.
4	kích hoạt: Liên kết này được sử dụng để kích hoạt các phần tử DOM nhất định dựa trên một điều kiện cụ thể.
5	vô hiệu hóa: Liên kết này vô hiệu hóa phần tử DOM được liên kết khi tham số đánh giá là true.
6	giá trị: Liên kết này được sử dụng để liên kết giá trị của phần tử DOM tương ứng với thuộc tính ViewModel.
7	textInput: Liên kết này được sử dụng để tạo liên kết 2 chiều giữa hộp văn bản hoặc vùng văn bản và thuộc tính ViewModel.
số 8	hasFocus: Liên kết này được sử dụng để đặt tiêu điểm của phần tử HTML DOM theo cách thủ công thông qua thuộc tính ViewModel.
9	đã kiểm tra: Liên kết này được sử dụng để tạo liên kết giữa phần tử biểu mẫu có thể kiểm tra và thuộc tính ViewModel.
10	tùy chọn: Liên kết này được sử dụng để xác định các tùy chọn cho một phần tử được chọn.
11	selectOptions: Liên kết này được sử dụng để làm việc với các phần tử đang được chọn trong điều khiển biểu mẫu chọn nhiều danh sách.
12	uniqueName: Liên kết này được sử dụng để tạo tên duy nhất cho phần tử DOM.