ตอนที่ 2 การสร้าง UI ให้รองรับ MVVM ของ Kendo UI (Telerik)
จากบทความที่แล้ว ถ้าใครยังไม่เคยอ่านแนะนำให้อ่านก่อน หลังที่เรารู้แล้วว่าเจ้า MVVM กับ jQuery มีวิธีการเรียกใช้งานแตกต่างกัน ไม่ให้เป็นการเสียเวลาเรามาเริ่มกันเลย ตัวอย่างนี้ผมจะเอาตัวอย่าง Grid ละกันในบทความนี้
วิธีการสร้าง Grid ในแบบ jQuery ซึ่งก็ง่าย ๆ มี code html นิดเดียว แต่ code ในส่วนของ jQuery นั้นจะเห็นว่ามีการ set ค่าต่าง ๆ มาก
แต่ในส่วนของ MVVM การสร้าง html จะมี code ที่มากกว่าอย่างเห็นได้ชัด และจะมี code ในส่วนของ JavaScript เพื่อ set data ให้กับ Grid ที่อยู่ใน html ส่วนการเรียกใช้บ่อย ๆ จะอยู่ใน data-bind ซึ่งเจ้า data-bind นั้นมี events ให้เราใช้อยู่ แต่หลัก ๆ ทางทีมเราจะใช้อยู่บ่อย ๆ แค่ source, events, click, visible
ทีนี้เราลองมาเพิ่ม property การกำหนด page size ให้กับ Grid MVVM ของเรากันเถอะ ก่อนอื่นแนะนำให้เปิด API Doc ของตัว Grid ขึ้นมาเพื่อเราจะดูว่ามีอะไรบ้างให้เราใช้
ผมเลือกหัวข้อ pageable.pageSize พอเข้ามาทำไมเป็น code ของ jQuery ละ ทำไมไม่เป็นของ MVVM ยากละสิแล้วจะเขียนยังไงดี ไม่ต้องตกใจไปนะครับ
แนะนำให้ดูชื่อหัวข้อที่เราจะใช้ เช่น
pageable ถ้าจะแปลงเป็นในส่วน MVVM จะได้ดังนี้ data-pageable=””
pageable.pageSize ถ้าจะแปลงเป็นในส่วน MVVM จะได้ดังนี้ data-pageable=” {pageSize:’20’} ”
* แนะนำถ้า property ตัวไหนเลือกมาแล้วมี การ set property แนะนำให้ใช้ “” ในการเรียกใช้ครั้งแรกจากนั้นภายใน “ ” ให้ใช้ ‘ ’ แทน เพราะถ้าไม่อย่างนั้นจะเกิด error ได้
ทีนี้ถ้าไม่ได้ต้องการแค่ page size อย่างเดียว แต่อยากเปลี่ยน wording ของ “item per page” ก็เหมือนเดิมแต่จะเพิ่มเติมขึ้นมาอีกนิดเช่น
data-pageable=” { pageSize:’20’, messages: { itemsPerPage: “Item per grid”} } ”
เท่านี้เราก็สามารถ set property ในการใช้ MVVM ให้เหมือนกับ jQuery ได้แล้ว แต่แค่นี้ยังไม่จบ เพราะเป็นการ set แค่ในส่วนของ html ยังมีในส่วนของ JavaScript สำหรับการดึง data มาใช้ แล้วเจอกันตอนหน้าครับ
ตอนที่ 1 ความแตกต่างระหว่าง MVVM และ jQuery ในการเรียกใช้ Kendo UI (Telerik)
