Environmental preparation
Before formally studying Backbone, you need to prepare something:
First, you need to get the Backbone framework source file: http://documentcloud.github.com/backbone/
Backbone relies on the basic method of the Underscore framework, so you also need to download the source file of the Underscore framework: http://documentcloud.github.com/underscore/
In Backbone, operations on DOM and events rely on third-party libraries (such as jQuery or Zepto), you only need to select one of them to download:
jQuery: http://jquery.com/
Zepto: http://zeptojs.com/
It seems like it's a cumbersome, but the purpose of Backbone is to use simple frameworks to build complex applications, so trouble does not mean it is complicated.
You can create a new HTML page and bring these frameworks in, like this:
<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="underscore/underscore-min.js"></script> <script type="text/javascript" src="backbone/backbone-min.js"></script>
At this point, you are ready for the environment you must run Backbone.
Hello World
Let’s first talk about the functions of this helloworld: There is a report button on the page, click the pop-up input box, enter content, confirm, and the content will be added to the page. The page picture is as follows:
Let's see the code below:
<!DOCTYPE html><html><head> <title>the5fire.com-backbone.js-Hello World</title></head><body><button id="check">Report</button><ul id="world-list"></ul><a href="http://www.the5fire.com">More tutorials</a></body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script src="http://documentcloud.github.com/underscore/underscore-min.js"></script><script src="http://documentcloud.github.com/backbone/backbone-min.js"></script><script>(function ($) { World = Backbone.Model.extend({ //Create a World object with name attribute name: null }); Worlds = Backbone.Collection.extend({ //Collection of World objects initialize: function (models, options) { this.bind("add", options.view.addOneWorld); } }); AppView = Backbone.View.extend({ el: $("body"), initialize: function () { //Constructor, instantiate a World collection class, and pass it into the AppView object in dictionary this.worlds = new Worlds(null, { view : this }) }, events: { "click #check": "checkIn", //Event binding, bind the element with id check in Dom}, checkIn: function () { var world_name = prompt("May I ask, which star are you?"); if(world_name == "") world_name = 'Unknown'; var world = new World({ name: world_name }); this.worlds.add(world); }, addOneWorld: function(model) { $("#world-list").append("<li>Here is a greeting from <b>" + model.get('name') + "</b> planet: hello world!</li>"); } }); //Instantiate AppView var appview = new AppView;})(jQuery);</script></html>I think the code is intuitive. It involves the three parts of backbone, view, model, and collection, and will be mentioned later. As long as you understand it here, model represents a data model, collection is a collection of models, and view is used to process pages and simple page logic.