Backbone in mobile front-end development: backbone Introduction

Source: Internet
Author: User

With the rapid development of web-side development technology, a variety of spa (single Page application) in the endless, the demand for more and more web front-end, we are no longer simple to use jquery to complete binding data, interactive effects. So there are a variety of MVC, MVP, MVVM and other front-end frameworks, starting today, I will introduce you to a front-end MVC framework--backbone.js.

This tutorial will focus on some of the common methods in backbone and the actual application in the project, and first introduce some of the backbone development configurations.

Backbone relies on the underscore engine, so when using backbone we first have to obtain a reference to underscore, the code hierarchy is as follows:

On the whole,Backbone is a Web -side JavaScript MVC Framework, is 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.

Different from back endC #in theMVC (model layer, view layer, control layer),Backbonein theMVCThe concept mainly refers to the model layer(model), view layer(view)and the collection layer(collection), we build and validate model properties at the model level, and at the view level the event bindings and model properties are completed .Setand theGet; of courseBackboneThere are also routesRouterThe concept of routing main control differs on the same pageViewthe display.

Below we show An example of backbone through a simple hello world :

For example, on initial load, the page will show helloWorld, and of course, when we enter text in the text box and submit it, the text in the TextBox will automatically replace Helloworld.

1 varAppview =Backbone.View.extend ({2el:$ (' body '),3 templates:{4"Tem": _.template ($ (' #template ')). HTML ())5                     },6Initializefunction(){7                         var_this= This;8$ ('. Text '). HTML (_this.templates.tem ({data: "Hello World"}));9                     },Ten events:{ One"Click input[type= ' button ']": "Addcontent" A                     }, -Addcontent:function(){ -                         var_this= This; the                         vartext=$ ("input[type= ' text ']"). Val (); -$ ('. Text ')). HTML (_this.templates.tem ({data:text})); -                     } -             }); +         varappview=NewAppview ();

The complete demo code is as follows:

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Document</title>6 </Head>7 <Body>8     <inputtype= "text">9     <inputtype= "button"value= "button">Ten     <H2class= "text"></H2> One     <Scripttype= "Text/template"ID= "template"> A         <span><%=Data%></span> -     </Script> -     <Scripttype= "Text/javascript"src= "Js/jquery.js"></Script> the     <Scripttype= "Text/javascript"src= "Js/underscore.js"></Script> -     <Scripttype= "Text/javascript"src= "Js/backbone.js"></Script> - </Body> - </HTML> + <Scripttype= "Text/javascript"> -         varAppview=Backbone.View.extend ({ + el:$ ('Body'), A templates:{ at                         "Tem": _.template ($ ('#template'). HTML ()) -                     }, - Initialize:function(){ -                         var_this= This; -                         $('. Text'). HTML (_this.templates.tem ({data:"Hello World"})); -                     }, in events:{ -                         "Click input[type= ' button ']":"addcontent" to                     }, + addcontent:function(){ -                         var_this= This; the                         vartext=$("input[type= ' text ']"). Val (); *                         $('. Text'). HTML (_this.templates.tem ({data:text})); $                     }Panax Notoginseng             }); -         varAppview=NewAppview (); the </Script>

Backbone in mobile front-end development: backbone Introduction

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.