Learn how backbone is used to create an AJAX application or a single-page interface

Backbone is a http://www.aliyun.com/zixun/aggregation/33906.html ">javascript framework that can be used to create model-view-controller ( Model-view-controller, MVC) class application and a Single-page interface. In this article, we'll see how backbone can be used to create Ajax applications or a single-page interface.

Web applications are increasingly focused on the front end, interacting with Ajax using client script. As JavaScript applications become more complex, there are challenges to the efficient authoring, repeatability, and maintainability of JavaScript code without the right tools and schemas. Model-View-Controller (MVC) is a common pattern that can be used for server-side development to generate organized and maintainable code. MVC supports the separation of data, such as JavaScript object Notation (JSON) objects, typically used for Ajax interaction, from the presentation layer or from the Document Object model of the page, which is can also be applied to client development.

Backbone (also known as Backbone.js) is a lightweight library created by Jeremy Ashkenas that can be used to create MVC-class applications. Backbone:

forced reliance on Underscore.js,underscore.js is a utility library that is not forced to rely on Jquery/zepto to automatically update the application's HTML based on changes in the model, which helps code maintenance facilitate the use of client templates and avoids Embedding HTML code in JavaScript

Models, views, collections, and routers are the main components in the backbone framework. In backbone, the model stores data retrieved from the server via the RESTful JSON interface. Models are closely related to views, which are responsible for rendering HTML for specific UI components and handling events triggered on elements, which is also part of the view itself.

Common abbreviations

DOM: Document Object Model MVC: Model-View-controller SPI: single-page interface

In this article, we'll learn several different backbone.js framework components. Study how MVC applies to backbone. Use these examples to see how important it is to create an Ajax application or a Single-page interface (SPI) backbone.

SPI applications: Backbone.router and Backbone.history

Applications that have a lot of Ajax interaction are increasingly like applications that have no page refreshes. These applications often attempt to limit interaction with a single page. The SPI method improves efficiency and speed and makes the entire application more responsive. The State concept replaces the page concept. Hash (hash) fragments are used to identify a particular state. The hash fragment is the part of the hash label (#) in the URL and is the key element of the class application. Listing 1 shows the two different states that an SPI application produces using two different hash fragments.

Listing 1. Two different states in SPI or Ajax applications

Http://www.example.com/#/state1http://www.example.com/#/state2

Backbone provides a component that is called a router (known as a controller before version 0.5) routing the client State. Routers can extend the Backbone.router function and contain a hash map (routes property) that associates the State with the activity. When an application reaches a related state, a specific activity is triggered. Listing 2 shows an example of a backbone router.

Listing 2. Backbone.router Example: routers.js

App.Routers.Main = Backbone.Router.extend ({//Hash maps for routes routes: {"": "Index", "/teams": "Getteams", "/teams/: Country ":" Getteamscountry ","/teams/:country/:name: "Getteam" "*error": "Fourofour"}, Index:function () {//homepage}, Getteams:function () {//List all teams}, Getteamscountry:function (country) {//Get List of teams for specific country}, Getteam:function (country, name) {//Get "teams for a specific country and with a specific name}, Fourofour:function (Error) {//404 Page}});

Each state created can be bookmarked. These 5 activities (index, Getteams, Getteamscountry, Getteamcountry, and Fourofour) are invoked when the URL encounters something like the following.

http://www.example.com triggers index () Http://www.example.com/#/teams trigger Getteams () http://www.example.com/#/teams/ Country1 trigger Getteamscountry () pass Country1 as parameter http://www.example.com/#/teams/country1/team1 trigger Getteamcountry () delivery Country1 and team1 as parameters http://www.example.com/#/something trigger Fourofour () to use as * (asterisk).

To start backbone, instantiate the page-loaded router and monitor any changes in the hash fragment with the instruction Backbone.history.start () method, as shown in Listing 3.

Listing 3. Application instantiation (using JQuery)

$ (function () {var router = new App.Routers.Main (); Backbone.history.start ({pushstate:true});

When the router is instantiated, the Backbone.history object is generated, and it automatically references the Backbone.history function. Backbone.history is responsible for matching the activities defined in the Routing and Router objects. After the start () method fires, the Backbone.history fragment property is created. that contains the value of the hash fragment. This sequence is useful for managing browser history in terms of State order. If the user wants to return to the previous state, click the browser's Return button.

In the example in Listing 3, the start () method is invoked through a configuration that enables the HTML5 attribute pushstate. For browsers that support Pushstate, backbone will monitor the Popstate event to trigger a new state. If the browser cannot support the HTML5 feature, then the onhashchange activity is monitored. If the event is not supported by the browser, polling technology will monitor any changes to the URL hash fragment.