backbone.js - Change Box Color using Backbone Model

ตัวอย่างการควบคุมการเปลี่ยนสีของ div#box ด้วย Backbone Model

สำหรับตัวอย่างต่อไปนี้จะเป็นการทดลองการประยุกต์ใช้ Backbone Model มาควบคุมการเปลี่ยนสีของ Box (ซึ่งในที่นี้เราจะใช้ div#box โดยกำหนด style ให้มีขนาด 300 x 300 pixel และมี outline:1px solid black) สำหรับการเปลี่ยนสี เราจะทำผ่าน link ที่อยู่ด้านล่าง (เมื่อเรา click ที่ link แต่ละอัน div#box ก็จะเปลี่ยนสีตาม link ที่เรา click)

ในตัวอย่างนี้ div#box จะทำหน้าที่เป็นตัวแทนของ User Interface ซึ่งการเปลี่ยนแปลงของ div#box ที่จะแสดงในตัวอย่างต่อไปนี้ จะทำผ่าน Model ทั้งหมด เมื่อ Model มีการเปลี่ยนแปลง ก็จะส่งผลให้ div#box เปลี่ยนตามไปด้วย เดี๋ยวลองมาดู Code ในส่วนของ JavaScript กันก่อนนะครับ

จาก Code ตัวอย่างข้างต้น มีการประกาศ Box Model โดย extend มาจาก Backbone.Model สังเกตุในส่วนของ initialize เราจะทำการ binding change event เอาไว้ สำหรับในกรณีที่ color มีการเปลี่ยนแปลง เราก็จะทำการเปลี่ยนสีของ div#box ตาม จากนั้นเราก็มีการสร้าง instance ของ Box Model ขึ้นมา โดยกำหนดให้มีค่าสีเริ่มต้นเป็นสีขาว (#fff) บรรทัดต่อมาเป็น Code ที่เรียกใช้งาน jQuery ในการ assign click Event ให้กับ link ที่อยู่ด้านล่างของ div#box เพื่อทำหน้าที่เปลี่ยน color ใน box model ที่เราสร้างขึ้นมา

สำหรับ Code ในส่วนของ HTML สำหรับตัวอย่างนี้ มีดังต่อไปนี้

HTML ในตัวอย่างประกอบด้วย 2 ส่วน ก็คือ ส่วนแรกจะเป็นการประกาศ div#box ส่วนถัดมาเป็นส่วนของ color menu

สำหรับตัวอย่างนี้ จะสังเกตุว่าเราจะควบคุมการเปลี่ยนแปลงของ div#box ผ่าน Model ทั้งหมด ซึ่งจะทำให้ Code ส่วนใหญ่จะถูกแยกไปอยู่ข้างใน Model ไม่กระจัดกระจายออกมาข้างนอก ทำให้ Code เป็นระเบียบและแก้ไขได้ง่าย

สำหรับตัวอย่างนี้ผมอยากให้ค่อยๆอ่านและทำความเข้าใจ ตัวอย่างนี้ไม่ได้มุ่งเน้นในการนำเสนอในเรื่องของ Coding แต่ต้องการเน้นให้เห็นถึงการนำ Model มาใช้ในการแบ่งส่วนในการทำงานของ Application ซึ่งผมคิดว่าตัวอย่างนี้ไม่มีอะไรที่ซับซ้อน ซึ่งจะช่วยให้เห็นภาพของการนำ Model ไปใช้งานได้ง่ายขึ้นครับ

แหล่งที่มา: http://backbonejs.org