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