Backbone.js là một framework MVC Javascript. Đúng như tên gọi của nó là một library với mục đích cung cấp background kiến trúc cho ứng dụng web. Backbone.js sử dụng các component Event, Model, Collection, View, Router có thể tạo nên ứng dụng web.
Ví dụ về kiến trúc của Backbone.js
Hiện tại có rất nhiều framework MVC Javascript nhưng tại sao bạn nên dùng Backbone.js thì có những lý do dưới đây:
Kích thước nhẹ khoảng 6.3kb (compress+gzipped)
Đã có sản phẩm thực tế sử dụng LinkedIn Mobile, Foursquare, Basecamp,...
Có thể kết hợp cùng các library khác Ví dụ: không có hạn chế gì đặc biệt về View sủ dụng
Backbone.js phụ thuộc vào các thư viện dưới đây
Underscore.js ( >= 1.4.3) hoặc là Lo-Dash
json2.js
jQuery ( >= 1.7.0) hoặc là Zepto (Bài viết này sẽ viết cho Backbone 0.9.10)
Setup
Để bắt đầu, chúng ta cùng setup môi trường và xem Backbone.js hoạt động như thế nào. Chuẩn bị những file js cần thiết cho Backbone.js giống như code được ghi bên dưới
Chúng ta bắt đầu tìm hiểu về Backbone.Model (gọi tắt là Model) Model là nơi để viết liên quan đến logic ngoài ra là nơi biểu thị data sử dụng trong application.
Hãy tạo Model đơn giản và cùng khám phá Model có thể làm được những gì
var obj = new Backbone.Model();
obj.set({name: "Murata"});
obj.set({age: 20});
console.log("obj: " + JSON.stringify(obj));
console.log("obj.name: " + obj.get("name"));
Kết quả trên console
obj: {"name":"Murata","age":20}
obj.name: Murata
Để sinh ra instance của Model thì dùng keywork new, set là để định nghĩa các thuộc tính của Model theo hình thức key-value, get là chỉ ra key và có thể nhận về giá trị tương ứng của key
var obj2 = new Backbone.Model({name: "Kenichiro", age: 30});
Có thể truyền thẳng các tham số vào biến thông qua constructor như trên và có thể định nghĩa các thuộc tính ngay từ bước khởi tạo Object.
Trên thực tế thì Model định nghĩa giá trị default hoặc có thể thêm biến riêng biệt, thông thường thì kế thừa Model và định nghĩa Model riêng để sử dụng. Kế thừa Model sẽ viết giống như bên dưới.
var Staff = Backbone.Model.extend({
defaults: {
"name": "Lionel",
"age": 10,
"updateTime": new Date()
},
initialize: function() {
console.log("Staff[" + this.cid + "]: " + JSON.stringify(this));
}
});
var tmpStaff = new Staff();
tmpStaff.set({name: "Murata", age: 15, id: 101});
console.log("Staff[" + tmpStaff.cid + "]: " + JSON.stringify(tmpStaff));
var tmpStaff2 = new Staff({name: "Kenichiro", age: 35, id: 102});
defaults có thể định nghĩa những giá trị setting default khi sinh ra constructor innitialize là implement cho trường hợp muốn xử lý đầu tiên khi sinh ra constructor initialize là giá trị đã chỉ định ở defaults và được gọi sau khi setting paramater thông qua constructor
Collection Basic
Sau khi hiểu cách sử dụng cơ bản của Model tiếp theo sẽ là Backbone.Collection (gọi tắt là Collection) Collection có vai trò lưu 1 list nhiều Model, để thao tác với list Model này thì có nhiều function.
Hãy cùng tìm hiểu việc tạo Collection và Collection có thể làm những gì
var Staff = Backbone.Model.extend({
defaults: {
"name": "Lionel",
"age": 10,
"updateTime": new Date()
},
initialize: function() {
console.log("Staff[" + this.cid + "]: " + JSON.stringify(this));
}
});
var tmpStaff = new Staff();
var tmpStaff2 = new Staff({name: "Kenichiro", age: 35, id: 102});
// ===========
var objs = new Backbone.Collection([tmpStaff, tmpStaff2]);
console.log("objs: " + JSON.stringify(objs));
console.log("objs.get(cid): " + JSON.stringify(objs.get("c1")));
console.log("objs.at(index): " + JSON.stringify(objs.at(0)));
Sử dụng add để thêm Model vào Collection Thông thường thì không chỉ vị trí khi thêm nhưng mà có thể chỉ định vị trí thông qua option {at: index} Số lượng model của Collection thì có thể kiểm tra thông qua thuộc tính length
After sort objs: [{"name":"Technology","age":10},{"name":"Murata","age":20},{"name":"Acroquest","age":20},{"name":"Kenichiro","age":30}]
After sort objs.at(index): {"name":"Technology","age":10}
Cần định nghĩa function comparator để sort Collection. Ở ví dụ trên là sort theo age tăng dần
Cùng kiểm tra một vài function hữu ích của Collection. Có rất nhiều function được định nghĩa ở Underscore.js. Dưới đây có liệt kê một số function hay dùng. Chi tiết thì hãy tham khảo document.
// each
objs.each(function(item, index){
console.log("each(" + index + "): " + JSON.stringify(item));
});
