Data Source (Telerik) สร้าง Template Kendo UI (MVVM)
จากบทความที่แล้ว จะเห็นว่าใน code HTML ผมมีแค่ <div> ว่าง ๆ อันเดียว สามารถ render UI ออกมาได้ จริง ๆ แล้ว สังเกตดี ๆ จะเห็น <script type=”text/x-kendo-template”> อยู่นั้นผมได้ใช้ความสามารถ ของ Kendo ทำการ render UI โดยที่เราไม่ต้องมาเขียน JavaScript ในการ render เอง ซึ่งผมได้ทำการเขียน Code HTML ลงไปในนั้น
วิธีการ render ข้อมูลที่ได้จาก API ภายใน Template Kendo วิธีใช้ก็ง่าย ๆ ก็คือ เราต้องดูว่า API ส่ง JSON ออกมาในรูปแบบไหน มี Key ว่าอะไรบ้าง
API ได้ return JSON กับมาให้ วิธีการนำไปใช้ก็จะมี Syntax
#:<Name>#
example #:username# <p>#:username#</p>
สมมุติว่า API นั้นมี Object อีก 1 level วิธีการนำไปใช้ก็เพิ่มเติมอีกนิดหน่อย
#:<Name.Id>#
example #:company.name# <p>#:company.name</p>
หลังจากเราสร้างเสร็จก็ได้หน้าตาแบบนี้
data-template คือ เราต้องอ้างอิงจาก JavaScript ที่อ้าง
JavaScript ที่สร้างขึ้นต้องกำหนด Id เพื่ออ้างอิงให้กับ Div ที่เรียกใช้ และ Type เพื่อบ่งบอกว่าเป็น Template
จริง ๆ ไม่ได้มีวิธีการที่ใช้แค่นี้ มี if loop อีก สามารถอ่านเพิ่มเติมได้ที่นี่ และที่ผมเขียนบทความนี้ทีหลังเพราะผมอยากให้ เห็นภาพรวมทั้งหมดก่อนจากบทความก่อนครับ สำหรับวันนี้น่าจะมีเพียงเท่านี้ ไว้คราวหน้ามีอะไรอัพเดทจะมาเพิ่มเติมต่อนะครับ