KnockoutJS - การผูกที่เปิดเผย

การผูกแบบประกาศใน KnockoutJS เป็นวิธีที่มีประสิทธิภาพในการเชื่อมต่อข้อมูลกับ UI

สิ่งสำคัญคือต้องเข้าใจความสัมพันธ์ระหว่างการผูกและ Observables ในทางเทคนิคทั้งสองแตกต่างกัน คุณสามารถใช้อ็อบเจกต์ JavaScript ปกติเป็น ViewModel และ KnockoutJS สามารถประมวลผลการโยงของ View ได้อย่างถูกต้อง

หากไม่มี Observable คุณสมบัติจาก UI จะถูกประมวลผลในครั้งแรกเท่านั้น ในกรณีนี้จะไม่สามารถอัปเดตโดยอัตโนมัติตามการอัปเดตข้อมูลพื้นฐาน เพื่อให้บรรลุสิ่งนี้การผูกต้องอ้างถึงคุณสมบัติที่สังเกตได้

ไวยากรณ์การผูก

การเข้าเล่มประกอบด้วย 2 รายการคือการเข้าเล่ม name และ value. ต่อไปนี้เป็นตัวอย่างง่ายๆ -

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

ในที่นี้ข้อความคือชื่อการผูกและ whatDay คือค่าการผูก คุณสามารถมีการเชื่อมโยงหลายรายการโดยคั่นด้วยเครื่องหมายจุลภาคดังที่แสดงในไวยากรณ์ต่อไปนี้

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

ที่นี่ค่าจะได้รับการอัปเดตหลังจากกดแต่ละปุ่ม

ค่าผูกมัด

ค่าการผูกสามารถเป็น single value, literal, ก variable หรือสามารถเป็น JavaScriptนิพจน์. หากการเชื่อมโยงอ้างถึงนิพจน์หรือการอ้างอิงที่ไม่ถูกต้อง KO จะสร้างข้อผิดพลาดและหยุดประมวลผลการเชื่อมโยง

ต่อไปนี้เป็นตัวอย่างบางส่วนของการผูก

<!-- 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>

สังเกตประเด็นต่อไปนี้ -

ช่องว่างไม่ได้สร้างความแตกต่างใด ๆ
เริ่มจาก KO 3.0 คุณสามารถข้ามค่าการผูกซึ่งจะทำให้การเชื่อมโยงเป็นค่าที่ไม่ได้กำหนด

บริบทการผูก

ข้อมูลที่ใช้ในการเชื่อมโยงปัจจุบันสามารถอ้างอิงได้โดยออบเจ็กต์ วัตถุนี้เรียกว่าbinding context.

ลำดับชั้นบริบทถูกสร้างและจัดการโดย KnockoutJS โดยอัตโนมัติ ตารางต่อไปนี้แสดงรายการบริบทการเชื่อมโยงประเภทต่างๆที่จัดเตรียมโดย KO

ซีเนียร์	ประเภทบริบทที่มีผลผูกพันและคำอธิบาย
1	$root สิ่งนี้หมายถึง ViewModel ระดับบนสุดเสมอ ทำให้สามารถเข้าถึงเมธอดระดับบนสุดสำหรับการจัดการ ViewModel โดยปกติจะเป็นวัตถุที่ส่งผ่านไปยัง ko.applyBindings
2	$data คุณสมบัตินี้เป็นจำนวนมากเช่น thisคำสำคัญในวัตถุ Javascript คุณสมบัติ $ data ในบริบทที่มีผลผูกพันหมายถึงอ็อบเจ็กต์ ViewModel สำหรับบริบทปัจจุบัน
3	$index คุณสมบัตินี้มีดัชนีของรายการปัจจุบันของอาร์เรย์ภายใน foreach loop ค่าของดัชนี $ จะเปลี่ยนโดยอัตโนมัติเมื่อและเมื่อมีการอัปเดตอาร์เรย์ Observable ที่อยู่เบื้องหลัง เห็นได้ชัดว่าบริบทนี้มีให้สำหรับไฟล์foreach การผูก
4	$parent คุณสมบัตินี้อ้างถึงอ็อบเจ็กต์ ViewModel พาเรนต์ สิ่งนี้มีประโยชน์เมื่อคุณต้องการเข้าถึงคุณสมบัติ ViewModel ภายนอกจากด้านในของลูปที่ซ้อนกัน
5	$parentContext เรียกอ็อบเจ็กต์บริบทที่ถูกผูกไว้ที่ระดับพาเรนต์ $parentContext. ซึ่งแตกต่างจาก$parent. $ parent หมายถึงข้อมูล ในขณะที่$ parentContextหมายถึงบริบทที่มีผลผูกพัน เช่นคุณอาจต้องเข้าถึงดัชนีของรายการ foreach ด้านนอกจากบริบทภายใน
6	$rawdata บริบทนี้เก็บค่า ViewModel ดิบในสถานการณ์ปัจจุบัน สิ่งนี้คล้ายกับ $ data แต่ความแตกต่างคือถ้า ViewModel ถูกรวมไว้ใน Observable ข้อมูล $ ก็จะกลายเป็นเพียงแค่ไม่ถูกตัดออก ViewModel และ $ rawdata กลายเป็นข้อมูลที่สังเกตได้จริง
7	$component บริบทนี้ใช้เพื่ออ้างถึง ViewModel ของส่วนประกอบนั้นเมื่อคุณอยู่ภายในส่วนประกอบเฉพาะ เช่นคุณอาจต้องการเข้าถึงคุณสมบัติบางอย่างจาก ViewModel แทนข้อมูลปัจจุบันในส่วนเทมเพลตของคอมโพเนนต์
8	$componentTemplateNodes สิ่งนี้แสดงถึงอาร์เรย์ของโหนด DOM ที่ส่งผ่านไปยังส่วนประกอบนั้น ๆ เมื่อคุณอยู่ภายในเทมเพลตส่วนประกอบเฉพาะ

คำศัพท์ต่อไปนี้มีให้ใช้ในการผูก แต่ไม่มีผลผูกพันตามบริบท

$context - นี่ไม่ใช่อะไรนอกจากอ็อบเจ็กต์บริบทที่มีผลผูกพัน
$element - วัตถุนี้อ้างถึงองค์ประกอบใน DOM ในการเชื่อมโยงปัจจุบัน

การทำงานกับข้อความและลักษณะที่ปรากฏ

ต่อไปนี้เป็นรายการประเภทการผูกที่จัดทำโดย KO เพื่อจัดการกับข้อความและลักษณะที่มองเห็นได้

ซีเนียร์	ประเภทการผูกและการใช้งาน
1	มองเห็นได้: เพื่อแสดงหรือซ่อนองค์ประกอบ HTML DOM ขึ้นอยู่กับเงื่อนไขบางประการ
2	ข้อความ: เพื่อตั้งค่าเนื้อหาขององค์ประกอบ HTML DOM
3	html: เพื่อตั้งค่าเนื้อหามาร์กอัป HTML ขององค์ประกอบ DOM
4	css: เพื่อใช้คลาส CSS กับองค์ประกอบ
5	สไตล์: เพื่อกำหนดแอตทริบิวต์สไตล์อินไลน์ขององค์ประกอบ
6	attr: เพื่อเพิ่มแอตทริบิวต์ให้กับองค์ประกอบแบบไดนามิก

การทำงานกับ Control Flow Bindings

ต่อไปนี้เป็นรายการประเภทการผูกโฟลว์การควบคุมที่จัดเตรียมโดย KO

ซีเนียร์	ประเภทการผูกและการใช้งาน
1	foreach: ในการผูกนี้แต่ละรายการอาร์เรย์จะถูกอ้างอิงในมาร์กอัป HTML แบบวนซ้ำ
2	ถ้า: หากเงื่อนไขเป็นจริงมาร์กอัป HTML ที่ระบุจะถูกประมวลผล มิฉะนั้นจะถูกลบออกจาก DOM
3	ifnot: การปฏิเสธหาก หากเงื่อนไขเป็นจริงมาร์กอัป HTML ที่ระบุจะถูกประมวลผล มิฉะนั้นจะถูกลบออกจาก DOM
4	กับ: การโยงนี้ใช้เพื่อผูกองค์ประกอบลูกของอ็อบเจ็กต์ในบริบทของอ็อบเจ็กต์ที่ระบุ
5	ส่วนประกอบ: หรือส่วนประกอบ: การผูกนี้ใช้เพื่อแทรกส่วนประกอบลงในองค์ประกอบ DOM และส่งผ่านพารามิเตอร์ทางเลือก

การทำงานกับการเชื่อมโยงฟิลด์แบบฟอร์ม

ต่อไปนี้เป็นรายการประเภทการผูกฟิลด์แบบฟอร์มที่ KO ให้ไว้

ซีเนียร์	ประเภทการผูกและการใช้งาน
1	คลิก: การผูกนี้ใช้เพื่อเรียกใช้ฟังก์ชัน JavaScript ที่เชื่อมโยงกับองค์ประกอบ DOM โดยอิงจากการคลิก
2	เหตุการณ์: การเชื่อมโยงนี้ใช้เพื่อฟังเหตุการณ์ DOM ที่ระบุและเรียกใช้ฟังก์ชันตัวจัดการที่เกี่ยวข้องตามเหตุการณ์เหล่านั้น
3	ส่ง: การโยงนี้ใช้เพื่อเรียกใช้ฟังก์ชัน JavaScript เมื่อส่งองค์ประกอบ DOM ที่เกี่ยวข้อง
4	เปิดใช้งาน: การโยงนี้ใช้เพื่อเปิดใช้งานองค์ประกอบ DOM บางอย่างตามเงื่อนไขที่ระบุ
5	ปิดใช้งาน: การผูกนี้ปิดใช้งานองค์ประกอบ DOM ที่เกี่ยวข้องเมื่อพารามิเตอร์ประเมินเป็นจริง
6	ค่า: การโยงนี้ใช้เพื่อเชื่อมโยงค่าขององค์ประกอบ DOM ที่เกี่ยวข้องกับคุณสมบัติ ViewModel
7	textInput: การผูกนี้ใช้เพื่อสร้างการเชื่อม 2 ทางระหว่างกล่องข้อความหรือพื้นที่ข้อความและคุณสมบัติ ViewModel
8	hasFocus: การผูกนี้ใช้เพื่อกำหนดโฟกัสขององค์ประกอบ HTML DOM ด้วยตนเองผ่านคุณสมบัติ ViewModel
9	ตรวจสอบ: การผูกนี้ใช้เพื่อสร้างการเชื่อมโยงระหว่างองค์ประกอบฟอร์มที่ตรวจสอบได้และคุณสมบัติ ViewModel
10	ตัวเลือก: การผูกนี้ใช้เพื่อกำหนดตัวเลือกสำหรับองค์ประกอบที่เลือก
11	ตัวเลือกที่เลือก: การผูกนี้ใช้เพื่อทำงานกับองค์ประกอบที่ถูกเลือกในปัจจุบันในการควบคุมฟอร์มเลือกหลายรายการ
12	uniqueName: การเชื่อมโยงนี้ใช้เพื่อสร้างชื่อเฉพาะสำหรับองค์ประกอบ DOM