Home > Developer > Web Develop
The actual application will use the template, Model and so on, and the template is the basis for advanced. So here's how to use a template in View, and how to populate a template with values, templates can use strings, or <script type= "text/template" > Declared content. Use <%=%> or <%-%> to declare a placeholder for the output of the variable.
Backbone template to use is the Underscore.js library, in order to understand Unserscore to see the official Underscore.js document, underscore template method prototype is as follows:
_.template (templatestring, [data], [settings])
Here are some complete examples.
one: Using string templates<!DOCTYPE HTML><HTML> <Head> <Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></Script> <Scriptsrc= "Http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></Script> <Scriptsrc= "Http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></Script> </Head> <Body> <DivID= "Container">Loading ...</Div> </Body> </HTML> <Script> varAppview=Backbone.View.extend ({el:'#container', Template: _.template (""), //upstream can be written as Template: _.template ("Initialize:function(options) { This. render (); }, Render:function() { This. $el. HTML ( This. Template ({who:'world!'})); //the previous open is: 1 identified code, this is written here. $el. html (this.template); } }); SetTimeout (function(){ varAppview= NewAppview (); }, +);</Script>
To highlight the effect, put new Appview () into the setTimeout () deferred execution, which is not necessary in the project.
Click http://fiddle.jshell.net/Unmi/A7MK7/to see the effect of the above code execution, you can see Loading ... was replaced with Hello world! after 1 seconds
In addition, if you do not assign a value to El when you previously declared View, you can specify a property when instantiating Appview el , using the
New Appview ({el: $ ("#container")})
two. Loading the templateYou can load the page with <script type= "Text/template" > contained content as a template, which itself is not displayed on the page. The following is a JQuery selector to locate the template declaration, HTML () to take out the content. The complete code is as follows:
<!DOCTYPE HTML><HTML> <Head> <Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></Script> <Scriptsrc= "Http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></Script> <Scriptsrc= "Http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></Script> </Head> <Body> <DivID= "Container">Loading ...</Div> <Scripttype= "Text/template"ID= "Who_template"> <H3>Hello<%=W.H.O.%></h3> </Script> </Body> </HTML> <Script> varAppview=Backbone.View.extend ({el:'#container', Initialize:function(options) { This. render (); }, Render:function() { varTemplate=_.template ($ ("#who_template"). HTML ()); This. $el. HTML (Template ({who:'backbone!'})); } }); SetTimeout (function(){ varAppview= NewAppview (); }, +);</Script>
Click http://fiddle.jshell.net/Unmi/2q6jJ/to see the performance, the page shows Hello backbone! after one second
Note that you cannot directly load other elements declared in the page, such as defined
< div id = "Who_template" style = "Display:none" > < h3 > Hello <% = who %> </ h3 > </ div >
If you are using _template ($ ("#who_template"). HTML (), it is shown after execution that the Hello <%= who%>. That is, the value of the variable is not resolved, if you do not need to fill in the template, you can do so, but also needs to display:none to hide it.
Click http://fiddle.jshell.net/Unmi/4Rnzs/to see the effect of loading normal page elements.
We can also define events directly in the custom View using the Events property, which we will then experience.
Reference: What is a view?
This article links http://unmi.cc/backbone-js-use-template/, from Yehuang Unmi Blog
Backbone.js using templates
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
