ไวยากรณ์ของ data-bind ใน KnockoutJS นั้นค่อนข้างง่าย ประกอบด้วยสองส่วน:
- Binding name: สิ่งนี้ระบุสิ่งที่คุณกำลังผูก เช่น
value,text,checkedเป็นต้น - Binding expression: สิ่งนี้ระบุค่าที่คุณต้องการผูก เช่น
model.name,'Hello, world!'เป็นต้น
ตัวอย่างเช่น:
1 | <input type="text" data-bind="value: model.name"> |
สิ่งนี้จะผูกค่าของคุณสมบัติ name ในโมเดลกับค่าของอินพุตข้อความ
คุณยังสามารถใช้ data-bind เพื่อผูกฟังก์ชันไปยังองค์ประกอบ DOM ได้อีกด้วย ตัวอย่างเช่น:
1 | <button data-bind="click: function() { alert('Hello, world!'); }">Click me</button> |
สิ่งนี้จะผูกฟังก์ชัน alert() เข้ากับปุ่ม ฟังก์ชัน alert() จะถูกเรียกเมื่อผู้ใช้คลิกปุ่ม
Here are some examples of how you can use data-bind syntax in KnockoutJS:
- You can use data-bind to bind the value of an input element to a property in a model:
1 | <input type="text" data-bind="value: model.name"> |
- You can use data-bind to bind the text of an element to a string:
1 | <span data-bind="text: 'Hello, world!'"> |
- You can use data-bind to bind the checked state of a checkbox to a boolean value:
1 | <input type="checkbox" data-bind="checked: isChecked"> |
- You can use data-bind to bind the onclick event of a button to a function:
1 | <button data-bind="click: function() { alert('Hello, world!'); }">Click me</button> |
Data-bind syntax เป็นเครื่องมือที่ทรงพลังที่สามารถใช้เพื่อผูกองค์ประกอบ DOM กับข้อมูลในโมเดลใน KnockoutJS
By using data-bind syntax, you can make your applications more dynamic and interactive.