By Arnon Puitrakul - 30 มีนาคม 2015
เมื่อตอนที่ผ่านๆมาเราได้เรียนรู้เรื่องของการ สร้างโครงสร้างของหน้าไปบ้างแล้ว ตอนหลังนี้จะเป็นเรื่องของการผูกข้อมูล หรือเรียกดีๆว่า Data-Binding แต่ก่อนจะพูดถึงเรื่องนั้น เราต้องมาพูดถึงเรื่อง Data-Binding กันก่อน
ภาษาไทยเราเรียกว่า การผูกข้อมูล (เรียกแล้วแปลกๆเรียก Data-Binding นี่แหละนะ) มันคือการทำให้ Content เราเป็น Dynamic คือ Content ในหน้าเว็บมันดึงหรือสร้างมาจากที่สักที่นึง ที่ไม่ใช่ข้อมูลตายตัว
ตามปกติแล้ว ในการสร้างเว็บที่ Dynamic หรือไม่ต้อง Refresh หน้าใหม่ Content ข้างในก็ Update ได้เองนั้น เราจะใช้สิ่งที่เรียกว่า AJAX ซึ่งวิธีการทำงานของมันก็คือ
ผมจะใช้ไฟล์จาก เมื่อ 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 ตามด้วยชื่อของ ตัวแปรที่เราตั้งชื่อไว้ใน {{}} นั่นเอง
สรุปวันนี้เราก็ได้เรียนเรื่องของ
เวลาเราทำงานกับข้อมูลอย่าง Pandas DataFrame หนึ่งในงานที่เราเขียนลงไปให้มันทำคือ การ Apply Function เข้าไป ถ้าข้อมูลมีขนาดเล็ก มันไม่มีปัญหาเท่าไหร่ แต่ถ้าข้อมูลของเราใหญ่ มันอีกเรื่องเลย ถ้าเราจะเขียนให้เร็วที่สุด เราจะทำได้โดยวิธีใดบ้าง วันนี้เรามาดูกัน...
Python เป็นภาษาที่เราใช้งานกันเยอะมาก ๆ เพราะความยืดหยุ่นของมัน แต่ปัญหาของมันก็เกิดจากข้อดีของมันนี่แหละ ทำให้เมื่อเราต้องการ Performance แต่ถ้าเราจะบอกว่า เราสามารถทำได้ดีทั้งคู่เลยละ จะเป็นยังไง เราขอแนะนำ Numba ที่ใช้งาน JIT บอกเลยว่า เร็วขึ้นแบบ 700 เท่าตอนที่ทดลองกันเลย...
หลายวันก่อน เราทำงานแล้วเราต้องการทำงานกับตัวเลขเพื่อให้มันอ่านได้ง่ายขึ้น จะมานั่งเขียนเองก็เสียเวลา เลยไปนั่งหา Library มาใช้ จนไปเจอ Humanize วันนี้เลยจะเอามาเล่าให้อ่านกันว่า มันทำอะไรได้ แล้วมันล่นเวลาการทำงานของเราได้ยังไง...
การทำงานกับตัวเลขทศนิยมบนคอมพิวเตอร์มันมีความลับซ่อนอยู่ เราอาจจะเคยเจอเคสที่ เอา 0.3 + 0.6 แล้วมันได้ 0.899 ซ้ำไปเรื่อย ๆ ไม่ได้ 0.9 เพราะคอมพิวเตอร์ไม่ได้มองระบบทศนิยมเหมือนกับคนนั่นเอง บางตัวมันไม่สามารถเก็บได้ เลยจำเป็นจะต้องประมาณเอา เราเลยเรียกว่า Floating Point Approximation...