บทความนี้ มีต้นแบบมาจากวีดีสอนการใช้งาน Backbone ของ PeepCode โดยนำมาปรับแต่งให้เข้าใจง่ายที่สุด ตามความเข้าใจของผู้เขียนบทความเอง
ถ้าพูดถึงความแตกต่างระหว่าง Pure JQuery Apps กับ Backbone Apps
JQuery
ส่วนของข้อมูล และส่วนแสดงผลอยู่ปะปนกัน
งานหลายอย่างที่ต้องทำเกี่ยวข้องกับการจัดการกับ DOM
Backbone
ผู้ใช้เป็นผู้ปรับปรุงข้อมูล (Data) เช่น เพิ่ม ลบ แก้ไข
ส่วนแสดงผล (Views) ปรับปรุงการแสดงผลเอง ตามข้อมูล (Data-Driven)
การเรียกใช้ Backbone
เตรียมพร้อมเรียกใช้ JavaScript ไลบรารี underscore, jquery , backbone
<script src=" jquery-1.5.1.min.js"></script>
<script src=" underscore.js"></script>
<script src=" backbone.js"></script>
การให้งาน Model สร้าง โครงสร้างข้อมูล
ลองสร้างโมเดล
<!DOCTYPE HTML>
<html>
<head>
<title>BackBone</title>
<script type="text/javascript" src="underscore-1.1.6.js"></script>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript">
window.SpriteModel = Backbone.Model.extend({});
</script>
</head>
<body>
</body>
</html>
ทดสอบใน Console ของเว็บเบราเซอร์
สร้าง Model
var HeroSprite = new SpriteModel({name: "HeroO",hp: "100"})
เลือกข้อมูล get
HeroSprite.get("name")
ตั้งค่าข้อมูล ทำทีละอัน หรือหลายอันผ่าน set
HeroSprite.set({name:"NewHero"})
HeroSprite.set({name: "NewHero",hp: 200})
แปลงข้อมูลเป็นแบบ JSON
HeroSprite.toJSON()
การใช้งาน View เพื่อแสดงผลข้อมูล
<!DOCTYPE HTML>
<html>
<head>
<title>BackBone</title>
<style>
.hp{
color:green;
}
.view{
font-style: italic;
}
</style>
<script type="text/javascript" src="underscore-1.1.6.js"></script>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript">
window.SpriteModel = Backbone.Model.extend({});
window.SpriteView = Backbone.View.extend({
className: 'view',
initialize:function(){
_.bindAll(this,'render'); //ทำการผูก object และ function
this.model.bind('change',this.render); //ผูกโมเดลกับฟังก์ชั่น
this.template = _.template($('#heroDetail').html()); //แสดงผล ใช้ Template แบบ underscore
},
render:function(){
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
return this;
}
});
</script>
<script type="text/template" id="heroDetail"> //Template
<span class="name"><%= name %></span>
<span class="hp"><%= hp %></span>
<ol>
<% _.each(items, function(item) { %>
<li><%= item.title %></li>
<% }); %>
</ol>
</script>
</head>
<body>
<div id="viewbox"></div>
</body>
</html>
ทดสอบใน Console ของเว็บเบราเซอร์
สร้าง Model
var myHero = new SpriteModel({name:"The Hero",hp:100,items:[{title:"Blade"},{title:"Ring"}]})
สร้างและผูกข้อมูล (model) ที่จะแสดงโดย View
heroView = new SpriteView({model:myHero})
แสดงผลให้เห็น โดยใช้ Jquery
$('#viewbox').append(heroView.render().el)
ทดสอบเปลี่ยนข้อมูลใน Model เพื่อดูผลลัพธ์ที่ได้ เช่น
myHero.set({'hp':50})
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น