Data Source (Telerik) สร้าง Template Kendo UI (MVVM)

https://docs.telerik.com/kendo-ui/framework/templates/overview

จากบทความที่แล้ว จะเห็นว่าใน 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 ว่าอะไรบ้าง

JSON Data

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 อีก สามารถอ่านเพิ่มเติมได้ที่นี่ และที่ผมเขียนบทความนี้ทีหลังเพราะผมอยากให้ เห็นภาพรวมทั้งหมดก่อนจากบทความก่อนครับ สำหรับวันนี้น่าจะมีเพียงเท่านี้ ไว้คราวหน้ามีอะไรอัพเดทจะมาเพิ่มเติมต่อนะครับ