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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
