Backbone.js là gì?
Backbone.js là một JavaScript phía máy khách (front-end) framework giúp tổ chức mã của bạn và làm cho nó dễ dàng hơn để bạn có thể phát triển ứng dụng web duy nhất trên trang. Sử dụng Backbone, JavaScript được tổ chức tốt hơn, cấu trúc, logic (các mô hình dữ liệu và trình bày) là đủ tách rời.
Tại sao chúng ta cần Backbone.js
1. Bạn sẽ xây dựng các ứng dụng JS nhanh hơn đáng kể hơn so với hiện tại.
2. Hỗ trợ thiết kế MVC.
3. Cácframework JavaScript front-end lớn (Backbone.js, Derby.js, Meteor.js, Knockout.js, Ember.js, Angular.js, và Spine.js). Backbone.js là framework JS đã được chứng minh.
Ví dụ về cách làm việc trên BackBone.JS
Tôi đã tạo ra một mẫu để xóa các khái niệm cơ bản của Backbone.Js. Để truy cập vào thư viện Backbone, tôi đã sử dụng http://cdnjs.cloudflare.com trực tuyến thay cho các thư viện Ajax.
Chúng ta chỉ cần tạo ra hai tập tin, sampleTask.js và sampleTask.html. Các sampleTask.html sẽ trông như thế này:
<!DOCTYPE html >
<html>
<head>
<title>Backbone.js Sample by DOTNET.VN</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript" src="sampleTask.js"></script>
</head>
<body>
<input type="text" placeholder="Add The Tasks" id="input" />
<button id="add-input">Add Task</button>
<ul id="task-list"></ul>
</body>
</html>
Tập tin sampleTask. js cần phải có các thiết lập mã sau đây.
Thêm mã và tập tin HTML.
$(function() {
TaskList = Backbone.Collection.extend({
initialize: function() {
}
});
TaskView = Backbone.View.extend({
tagName: 'li',
events: {
'click #add-input': 'getTask'
},
initialize: function() {
var thisView = this;
this.tasklist = new TaskList;
_.bindAll(this, 'render');
this.tasklist.bind("add", function(model) {
thisView.render(model);
})
},
getTask: function() {
var task_name = $('#input').val();
this.tasklist.add({ name: task_name });
},
render: function(model) {
$("#task-list").append("<li>" + model.get("name") + "</li>");
console.log('rendered')
}
});
var view = new TaskView({ el: 'body' });
});
Giải thích Mã
Trong các mã JS trước đó, ban đầu tôi đã tạo ra một bộ sưu tập TaskList để thêm các mục.
Trong phương thức khởi tạo, các điểm đăng ký 2 built-in trong các sự kiện bộ sưu tập mô hình: thêm và loại bỏ. Tôi đã thêm sự kiện thêm để làm cho điểm tương ứng với mô hình TaskList.
Các phương thức "getTask" được sử dụng để có được giá trị từ bất kỳ kiểu đầu vào và thêm rằng trong các tuyên bố trước bộ sưu tập TaskList.
Cuối cùng phương thức "render" sẽ được gọi để hiển thị danh sách (mục thêm như mô hình) trong các phần tử HTML "task-list".
Sản phẩm: