1. Chapter I Hello backbonejs[ext.]

1.1 Basic concepts

Backbone, English means: courage, spine, but in the program, especially after the Backbone suffix JS, it becomes a framework, a JS library.

Backbone.js, do not know what the author is named for the purpose, it may be hoped that this library will become a Web-based development in spine.

All right, gossip's over.

Backbone.js provides a framework for Web development through models for Key-value binding and custom event handling through collections provides a rich set of APIs for enumeration functions, event handling through views, and with existing application through rest FUL the JSON interface. It is a front-end JS framework based on jquery and underscore.

On the whole, Backbone.js is a web-side JavaScript MVC framework, a lightweight framework. It allows you to organize JS code like Java (back-end) code, define classes, properties of classes, and methods. More importantly, it can gracefully organize the original, illogical JavaScript code, and provide a way to separate data and logic, reducing data and logic clutter during code development.

There are several important concepts in Backbonejs, first introduced: Model,collection,view,router. The model is an abstraction based on real data, such as a person (people); collection is a collection of model, such as a group of people; View is a presentation of data in model and collection, rendering data to a page Router is the process of routing, just like traditional Web sites through the URL of the actual different pages, in a single page application (SPA) through the router to control the previous view of the display.

With backbone, you can use your data as models, and through models you can create data, validate data, destroy it, or save it to the server. When an action on the interface causes a change in the properties of the model, the model triggers the event of the changes. The views that are used to display the model state receive a message that the model triggers a change, and then respond to it and re-render the new data to the interface. In a complete backbone application, you don't need to write the glue code to get the node from the DOM with a special ID, or to manually update the HTML page, because when the model changes, the views are simply self-renewing.

The above is a simple introduction, about backbone after I read his introduction and simple tutorial, the first impression is that it developed a set of its own rules for front-end development, under which we can like to use the Django organization Python code of the same organization JS code, it is elegant, The ability to make the front-end and server interactions easier.

In the backbone data, found that there is no very systematic introduction of Chinese information and more examples, so I intend to learn while practicing while writing, strive to let everyone through a series of articles can be used quickly backbone.js.

For more information about backbone, see this:

http://documentcloud.github.com/backbone/

http://backbonetutorials.com/

Application range of 1.2 backbone:

Although it is a lightweight framework, but the framework of this thing is not anywhere can be used, otherwise it will appear overkill, thankless results. So where does it apply?

According to my understanding, as well as the functionality of backbone, if a single page has very complex business logic, then it is appropriate to use it, it can easily manipulate the DOM and the organization JS code.

The watercress's Alpha city is an excellent example of pure single-page, complex front-end logic.

Of course, in addition to my own analysis of the scope of application, in the backbone document see a lot of foreign sites using it, there are many, indicating that Backbonejs is still very easy to use.

A little list of domestic use to Backbonejs site:

1. Watercress Alpha City Link: http://alphatown.com/

2. Watercress reading link: http://read.douban.com/mainly used in the main body of the book page

3. Baidu Developer Center Link: http://developer.baidu.com/

4. Mobile Sohu Live Link: http://zhibo.m.sohu.com/

5. Oatos Enterprise Network disk link: http://app.oatos.com

1.3 Apply

Now, we are going to start learning Backbonejs, I assume you have not seen my first edition, that version has a lot of problems, there are many people on the blog feedback. But if you see that version, this new version of the tutorial you can go through the rough, but the newly added practice is to write it out, run up.

First of all, why do we have to learn this new thing? In short, it's about mastering more advanced tools. Then why do you have to master the advanced tools? Simply to let us do our work in a more reasonable and elegant way, the response to the code is to make the code maintainable and easy to expand. If you're in a complex direction, these two topics are enough for me to write a few days of blogging.

The most direct and effective use of knowledge, optics is useless, especially programming such practical science. Novice most often make a mistake is like to keep reading, read the thought will, and then began to learn the next crazy. Not knowing what to read and write to be able to run is two completely different states. So it is recommended that the novice-programming novice or down to the code are knocked, executed, the success is.

The following directly to a simple demo out, using the Backbonejs of the three main modules: Views,collection,model. By executing This example, we understand how this example works, and quickly get a feel for what you want to do, and then break it down gradually.

1.4 Full Demo

The main function of this demo is to click on the page "new check-in" button, Pop-up dialog box, enter the content, the contents of a fixed string displayed on the page. The logic of the event trigger is that the click triggers the Checkin method, and then checkin constructs the world object into the collection that has been initialized worlds.

To see the full code:

<! DOCTYPE html>
　　
This involves three parts of backbone, view, model, Collection, where model represents a data model, Collection is a collection of models, and view is used to process pages and simple page logic.
Put the code in your editor, execute it successfully, modify it somewhere, and try again.
1. Chapter I Hello backbonejs[ext.]