Backbone ư, đối với mình nó cũng mới chỉ là một kiến thức mới mà thôi. Làm thế nào mà bạn biết đến nó? (bạn là người đam mê công nghệ, bạn bè giới thiệu, vô tình nhìn thấy trên mạng...) Và bạn vẫn chưa hình dung nó là cái gì ?
Trước đây khi mình bắt đầu tập tành làm website thì những khái niệm như javascript, ajax, jquery đối với mình đó là những khái niệm mà thôi. Việc viết js lúc đó cũng chỉ đơn giản là viết theo chức năng của website mà thôi. Chính vì vậy mà số lượng code ngày một tăng lên theo từng ngày và ít có khả năng sử dụng lại.
Khái niệm MVC chắc là bạn nào cũng biết hoặc từng nghe qua (đi pv lúc nào thấy mấy ảnh cũng hỏi hoài - mấy anh ko biết MVC nên mới hỏi thôi ^ ^). Hiện tại một số js framework cũng hỗ trợ tạo website theo hướng MVC rồi. Và backbonejs là một trong những số đó (ngoài backbonejs ra mình còn có thêm một số framework mới như Ember.js hay Angular.js).
Hướng dẫn tạo một app đơn giản để giới thiệu Backbonejs nhỉ :):
Thực ra khi viết bài này mình cũng không biết nên bắt đầu hướng dẫn các bạn tạo app gì cho đơn giản nhất, thôi chúng ta sẽ làm một app quen thuộc nhất đó là todo app, rất là quen đúng không các bạn.
Ở đây mình sẽ đi chầm chậm và giải thích từng bước cho các bạn hiểu.
Khái niệm MVC trong backbonejs sẽ gồm 3 đối tượng chính: Collection, Model, View. Trước khi bắt đầu tạo một app mới, mình nghĩ chúng ta cần phải define rõ là app mình cần những gì, những collection nào, model là gì, view sẽ ra sao nhé.
Các bạn xem trước DEMO ở đây nhé:
HTML của todo app:
Theo như hình mình mô tả bên trên chúng ra sẽ có các đối tượng như sau:
Chú ý: trong backbonejs các đối tượng chính Model, View, Collection sẽ được kế thừa từ những đối tượng như Backbone.Model, Backbone.View, Backbone.Collection
- TodoModel: mỗi một todo item (điều cần làm - không biết dịch thế nào) sẽ chứa thông tin điều cần làm.
Cú pháp rất đơn giản chỉ việc định nghĩa một TodoModel object được kế thừa từ đối tượng Backbone.Model. Theo như được định nghĩa thì TodoModel sẽ bao gồm những thuộc tính: todo, complete (isComplete thì đúng hơn :|) và date.
- TodoView: Tiếp theo mình cần có một đối tượng View để hiển thị TodoModel phía trên,
đối với đối tượng này mình sẽ khai báo như hình bên dưới.
Ở đâyTodoView mình khai báo với các thuộc tính: tagName, initialize và render.
tagName: mỗi một View trong backbone sẽ đi kèm với một DOM element và mặc định của nó là div, theo như code html hoàn chỉnh, mình sẽ dùng tagName là li.
initialize: đây là phương thức khởi tạo (contructor) và nó chỉ tự động thực thi khi chúng ta tạo mới một đối tượng View.
Ví dụ: var todoView = new TodoView(); thì phương thức initialize sẽ được thực khi ngay lúc này.
render: phương thức này sẽ được gọi để thực hiện thao tác cập nhật hiển thị lại cho chính đối tượng View đó. Các bạn chú trong code mình sử dụng đối tượng this.$el đây là đối tượng render của một view, TodoView của mình sẽ là chính thẻ li. nếu bạn gọi this.$el thì DOM được bọc bởi jquery. còn nếu gọi this.el thì sẽ không có jquery nhé.
Khi tạo mới một view thì chúng ta có thể cung cấp thêm tham số el hoặc không.
var todoView1 = new TodoView();
var todoView2 = new TodoView({el: '#mytag'})
- TodoCollection: ở đây mình sẽ qui định collection của mình sẽ chứa những đối tượng với kiểu dữ liệu là như thế nào.
- Tạo danh sách các điều cần làm trong ngày:
- Tạo mới một TodoListView để thực hiện render danh sách todoCollection trên.
Với TodoListView này sẽ có 1 chổ khác so với TodoView ở trên. Trong phương thức initialize mình sẽ thêm một thao tác listenTo và mục đích của nó là để lắng nghe trên đối tượng todoCollection nếu có sự kiên thêm mới TodoModel thì nó sẽ tự động gọi phương thức addOne để cập nhật TodoListView của chúng ta.
- Và cuối cùng là AppView:
Xin lỗi các bạn do không có nhiều thời gian nên mình sẽ dừng lại tại đây, về mặt cơ bản chúng ta đã viết được cho mình một simple app với backbonejs.
Phần còn lại như xóa todo item, lưu trữ item, ứng dụng requirejs, underscorejs để giúp app của chúng ta tốt hơn mình sẽ hướng dẫn các bạn trong bài viết tới.
