Tutorial

Google Web Polymer - Core Pages หลอกตาประชาชน (EP.6)

By Arnon Puitrakul - 02 เมษายน 2015

Google Web Polymer - Core Pages หลอกตาประชาชน (EP.6)

เมื่อ EP. ทีแล้วเราได้เรียนรู้เรื่องของการผูกข้อมูลกับ JS กันไปแล้ว วันนี้เราขยับมาอีกสเต๊ปนั้นคือ การใช้ Core Pages กับ JS แบบเมื่อ EP. ที่แล้ว

Today's Target

วันนี้เราจะมาเรียนรู้เรื่องของการใช้ Core Pages เพื่อให้เรากระโดดไปอีกหน้าได้อย่างง่ายดาย (ถ้านึกไม่ออกให้ไปลองเข้าหน้าเว็บของ Polymer ดู แล้วลองคลิกลิงค์ดูจะเห็นว่าหน้ามันไม่ได้ถูกโหลดใหม่เลย) จริงๆมันมีหลายวิธีในการทำ แต่วันนี้เราจะใช้วิธีบ้านๆในการทำก่อน นั่นคือ เราจะสร้าง หน้าของเราทั้งหมดในไฟล์เดียว แล้วใช้ js ควบคุมการแสดงผลอีกที

มาเริ่มทำกันเบย~~

ก่อนอื่นให้ดึงไฟล์ของเมื่อ ep ที่แล้วมาก่อนนะ แล้วใน Content ให้ตามนี้เลย

 <core-pages selected = "0">
 <section>
 <h1>Home</h1>
 <div>Home content</div>
 </section>

 <section>
 <h1>Portfolio</h1>
 <div>Portfolio content</div>
 </section>

 <section>
 <h1>Contact</h1>
 <div>Contact content</div>
 </section>
 </core-pages>

มันคือการสร้าง Core Pages อยากรู้ว่าคืออะไรลอง Refresh ดู ครับแล้วลองเปลี่ยนตัวเลขตรง selected ดู หน้ามันจะเปลี่ยนไปเรื่อยๆตามที่เราสั่ง แต่ถ้ามี Menu เยอะๆเราก็ไม่รู้เลขใช่ม่ะครับ มันจึงเกิด Properity ที่ชื่อว่า valueattr ขึ้นมา มาลองเล่นกัน

 <core-pages selected = "home" valueattr = "data-category">
 <section data-category = "home">
 <h1>Home</h1>
 <div>Home content</div>
 </section>

 <section data-category = "portfolio">
 <h1>Portfolio</h1>
 <div>Portfolio content</div>
 </section>

 <section data-category = "contact">
 <h1>Contact</h1>
 <div>Contact content</div>
 </section>
 </core-pages>

สังเกตนะครับว่าใน Section Tag นั้นผมเพิ่ม Properity ชื่อว่า data-category ขึ้นมาเพื่อเป็นเหมือน Bookmark ว่าส่วนที่เราต้องการมันอยู่ตรงไหน (เหมือนชื่อของมันนั่นล่ะ) และในส่วนของ Core Pages ผมเพิ่ม valueattr เข้าไป และเปลี่ยน selected เป็นคำว่า home แทน
แล้วลอง Refresh ดูครับ มันจะเข้าหน้า Home ให้เรา แต่ถ้าเรา เปลี่ยนเป็น Contact แทน มันก็จะเข้าหน้า Contact ให้เรา เจ๋งปุ๊ล่ะ!!

ปัญหาใหม่!!

ในเวลาใช้งานจริงๆ User คงไม่มานั่งแก้โค๊ตเราหรอกเนอะ เพราะงั้นผมจะสร้าง Menu เป็นแถบข้างๆล่ะกัน ถ้าใครใช้ไฟล์เก่าก็แก้ที่ core-header-panel ได้เลย

 <core-header-panel drawer>
 <core-toolbar>Menu</core-toolbar>
 <core-menu selected = "home" valueattr = "data-category">
 <core-item data-category = "home" label = "Home"></core-item>
 <core-item data-category = "portfolio" label = "Portfolio"></core-item>
 <core-item data-category = "contact" label = "Contact"></core-item>
 </core-menu>
 </core-header-panel>

เพิ่มแล้วก็ทำเหมือนของ เมื่อกี้เลย ทีนี้ลอง Refresh ดูครับ จะเห็นว่าคลิกไปก็ไม่มีอะไรเกิดขึ้น 5555 โดนหลอกและ (ซะที่ไหนล่ะเฟ้ย) ปัญหามันคือ 2 Element นี้มันไม่ได้เชื่อมกัน
เราจะเชื่อมมันด้วย ตัวแปรใน JS เหมือนของ EP. ที่แล้วเลย ผมเปลี่ยน

 <core-menu selected = "home" valueattr = "data-category">

เป็น แบบด้านล่าง เพื่อให้มันวิ่งตามตัวแปร

 <core-menu selected = "{{page}}" valueattr = "data-category">

ที่ core-pages ก็เช่นกัน เพราะเราต้องการให้หน้าเปลี่ยนไปด้วยใช้ม้าาล่ะ

<core-pages selected = "{{page}}" valueattr = "data-category">

ลอง Refresh แล้วลองคลิกที่เมนู ดูเห็นม่ะครับ ได้และ อิอิ แต่ก็ปัญหาอีก ตอนเราเข้ามาครั้งแรก มันไม่ขึ้นอะไรเลย นั่นเพราะว่าเราไม่ได้เซ็ตค่า Default ให้มัน วิธีคือ เราจะเขียน JS เพื่อจัดการมันกัน

var app = document.querySelector('#app');
app.page = 'home';

ผมเช็ตตัวแปร page ให้เป็นหน้า home แทน พอเวลาเราเข้ามาหน้าแรกก็จะกลายเป็นหน้า home ทันทีจาก ที่ไม่ขึ้นอะไร
สรุปวันนี้เราได้เรียนรู้เรื่อง

  • การใช้ valueattr เพื่อเก็บตัวเลือกบน Selected
  • การใช้ Core Pages เพื่อเปลี่ยนหน้าเว็บโดยไม่ได้ Refresh
    วันนี้น้อยมากครับ ง่ายๆอยู่ วันถัดไปจะเป็นอะไรนั้น รอได้เลยนะครับ
    Source Code : https://drive.google.com/folderview?id=0BwrPA9Miv4o2WTFCT3VpTElUdk0&usp=sharing

Read Next...

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

เวลาเราทำงานกับข้อมูลอย่าง Pandas DataFrame หนึ่งในงานที่เราเขียนลงไปให้มันทำคือ การ Apply Function เข้าไป ถ้าข้อมูลมีขนาดเล็ก มันไม่มีปัญหาเท่าไหร่ แต่ถ้าข้อมูลของเราใหญ่ มันอีกเรื่องเลย ถ้าเราจะเขียนให้เร็วที่สุด เราจะทำได้โดยวิธีใดบ้าง วันนี้เรามาดูกัน...

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

Python เป็นภาษาที่เราใช้งานกันเยอะมาก ๆ เพราะความยืดหยุ่นของมัน แต่ปัญหาของมันก็เกิดจากข้อดีของมันนี่แหละ ทำให้เมื่อเราต้องการ Performance แต่ถ้าเราจะบอกว่า เราสามารถทำได้ดีทั้งคู่เลยละ จะเป็นยังไง เราขอแนะนำ Numba ที่ใช้งาน JIT บอกเลยว่า เร็วขึ้นแบบ 700 เท่าตอนที่ทดลองกันเลย...

Humanise the Number in Python with "Humanize"

Humanise the Number in Python with "Humanize"

หลายวันก่อน เราทำงานแล้วเราต้องการทำงานกับตัวเลขเพื่อให้มันอ่านได้ง่ายขึ้น จะมานั่งเขียนเองก็เสียเวลา เลยไปนั่งหา Library มาใช้ จนไปเจอ Humanize วันนี้เลยจะเอามาเล่าให้อ่านกันว่า มันทำอะไรได้ แล้วมันล่นเวลาการทำงานของเราได้ยังไง...

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

การทำงานกับตัวเลขทศนิยมบนคอมพิวเตอร์มันมีความลับซ่อนอยู่ เราอาจจะเคยเจอเคสที่ เอา 0.3 + 0.6 แล้วมันได้ 0.899 ซ้ำไปเรื่อย ๆ ไม่ได้ 0.9 เพราะคอมพิวเตอร์ไม่ได้มองระบบทศนิยมเหมือนกับคนนั่นเอง บางตัวมันไม่สามารถเก็บได้ เลยจำเป็นจะต้องประมาณเอา เราเลยเรียกว่า Floating Point Approximation...