Tutorial

Google Web Polymer - Auto Binding-Template (EP.5)

By Arnon Puitrakul - 30 มีนาคม 2015

Google Web Polymer - Auto Binding-Template (EP.5)

เมื่อตอนที่ผ่านๆมาเราได้เรียนรู้เรื่องของการ สร้างโครงสร้างของหน้าไปบ้างแล้ว ตอนหลังนี้จะเป็นเรื่องของการผูกข้อมูล หรือเรียกดีๆว่า Data-Binding แต่ก่อนจะพูดถึงเรื่องนั้น เราต้องมาพูดถึงเรื่อง Data-Binding กันก่อน

Data-Blinding คืออะไร?

ภาษาไทยเราเรียกว่า การผูกข้อมูล (เรียกแล้วแปลกๆเรียก Data-Binding นี่แหละนะ) มันคือการทำให้ Content เราเป็น Dynamic คือ Content ในหน้าเว็บมันดึงหรือสร้างมาจากที่สักที่นึง ที่ไม่ใช่ข้อมูลตายตัว

มันทำงานยังไง?

ตามปกติแล้ว ในการสร้างเว็บที่ Dynamic หรือไม่ต้อง Refresh หน้าใหม่ Content ข้างในก็ Update ได้เองนั้น เราจะใช้สิ่งที่เรียกว่า AJAX ซึ่งวิธีการทำงานของมันก็คือ

  • JS จะส่ง Request ไปหา Web Server
  • Web Server ส่งข้อมูลกลับมา
  • ลบข้อมูลของเก่าที่แสดงทิ้ง
  • สร้างที่วางข้อมูลใหม่
  • เอาข้อมูลที่ได้จาก Web Server มาวางลงไปในที่วางที่พึ่งสร้าง
    จากที่เห็น Process แบบนี้ทำให้เราเปลืองทรัพยากรในการสร้าง ตัววางข้อมูลใหม่ ใน Polymer จึงมีวิธีใหม่ในการจัดการกับข้อมูล โดยการ ไม่ลบตัววางข้อมูลทิ้ง แต่ เปลี่ยนค่าในนั้นแทน ทำให้ประสิทธิภาพดีขึ้นอย่างไม่น่าเชื่อ (ตอนแรกก็ งง อยู่เหมือนกัน)

มาลองเล่นกัน

ผมจะใช้ไฟล์จาก เมื่อ EP. ที่แล้วเลยนะครับ เหมือนเดิม เอามาทำต่อ ก่อนอื่นจับ Tag Template คร่อมกับ core-drawer-panel (คร่อมอีกแล้ว 555 จากโค๊ตสั้นๆกลายๆเป็นอะไรไม่รู้ไปแล้ว แอบ งง เบาๆ) และใน Tag Template เราจะเติมประเภทของ Data-Blinding เป็น Auto-Blinding โดย เติม is = "auto-blinding" เข้าไป สุดท้ายก็เติมชื่อให้มันหน่อยเป็น id = "tmpl"
ต่อไปเราจะไปปรับ Index.html ต่อ ให้มันรองรับกับ js ที่เรากำลังจะเขียน ตอนนี้ผมจะให้มันขึ้นว่าเราอยู่หน้าไหนแล้วล่ะกัน ไปเติม

 <div>You're on page : {{selected}}</div>

ใน div tag ของ content การใส่ {{ชื่อตัวแปร}} เป็นการทำให้ js รู้ว่า section นี้ชื่ออะไร และอยู่ตรงไหนของหน้า เพื่อที่เราจะเขียน js เพื่อเปลี่ยนมัน
และเปลี่ยนอีกจุดคือ core-menu

 <core-menu selected = "{{selected}}">
 <core-item label = "one"></core-item>
 <core-item label = "two"></core-item>
 </core-menu>

โดยการเพิ่ม Properity ที่ชื่อว่า Selected เข้าไปและให้ มันมีค่าเป็นตัวแปร selected ใน js
หลังจากเราแก้หน้า index.html เรียบร้อยแล้ว เราจะไปแก้หน้า app.js กันต่อ

var tmpl = document.querySelector('#tmpl');
tmpl.selected = 0;

ผมเพิ่ม 2 บรรทัดนี้เข้าไป บรรทัดแรก คือการสร้างตัวแปรใน js เพื่อกำหนด tag ที่เราต้องการเข้าถึงด้วย querySelector() ตามด้วย id ของ div ส่วนที่เราต้องการ ในที่นี้ผมต้องการชื่อ tmpl ที่เราได้ตั้งเอาไว้ก่อนหน้านี้
วิธีการเข้าถึงตัวแปร ก็ไม่ยากครับ ตามบรรทัดที่ 2 เลยนั่นคือชื่อ tag ตามด้วยชื่อของ ตัวแปรที่เราตั้งชื่อไว้ใน {{}} นั่นเอง
สรุปวันนี้เราก็ได้เรียนเรื่องของ

Read Next...

ติดตั้ง Zigbee Dongle บน Synology NAS กับ Home Assistant

ติดตั้ง Zigbee Dongle บน Synology NAS กับ Home Assistant

ก่อนหน้านี้เราเปลี่ยนมาใช้ Zigbee Dongle กับ Home Assistant พบว่าเสถียรขึ้นเยอะมาก อุปกรณ์แทบไม่หลุดออกจากระบบเลย แต่การติดตั้งมันเข้ากับ Synology DSM นั้นมีรายละเอียดมากกว่าอันอื่นนิดหน่อย วันนี้เราจะมาเล่าวิธีการเพื่อใครเอาไปทำกัน...

โหลด CSV วิธีไหนเร็วที่สุด ?

โหลด CSV วิธีไหนเร็วที่สุด ?

เมื่อหลายวันก่อนมีพี่ที่รู้จักกันมาถามว่า เราจะโหลด CSV ยังไงให้เร็วที่สุด เป็นคำถามที่ดูเหมือนง่ายนะ แต่พอมานั่งคิด ๆ ต่อ เห้ย มันมีอะไรสนุก ๆ ในนั้นเยอะเลยนี่หว่า วันนี้เราจะมาเล่าให้อ่านกันว่า มันมีวิธีการอย่างไรบ้าง และวิธีไหนเร็วที่สุด เหมาะกับงานแบบไหน...

ฮาวทู Sync Obsidian Note ด้วย LiveSync Plugin

ฮาวทู Sync Obsidian Note ด้วย LiveSync Plugin

ตั้งแต่ใช้ Obsidian เป็น App จด Note หลัก ชอบวิธีการจัดการมาก ๆ เมื่อใช้งานร่วมกับ Plugin ต่าง ๆ ยิ่งทำให้การใช้งานยืดหยุ่นมากกว่าเดิมอีกเยอะมาก ๆ ติดอยู่เรื่องเดียวคือ การใช้งานในหลาย ๆ อุปกรณ์ แต่เราเจอ Plugin ตัวนึงที่น่าสนใจมาก ๆ คือ LiveSync วันนี้เราจะมาเล่าวิธีการติดตั้ง และใช้งานมันกัน...

การสร้าง SSD Storage Pool บน Synology DSM

การสร้าง SSD Storage Pool บน Synology DSM

สำหรับคนที่ใช้ Synology NAS บางรุ่นจะมีช่อง M.2 สำหรับเสียบ NVMe SSD โดยพื้นฐาน Synology บอกว่ามันสำหรับการทำ Cache แต่ถ้าเราต้องการเอามันมาทำเป็น Storage ละ มันจะทำได้มั้ย วันนี้เราจะมาเล่าวิธีการทำกัน...