how to create and display external template in html page using Backbone.js?
Simplest way would be to use underscore.js
which is suggested by backbone.js itself. If you want to go one step higher, then you could go for templating engines like :
and so many others..
Personally i prefer Underscore.js. An example would be as follows :
Using underscore :
$.get('templates/your-template-file.html', function (data) {
template = _.template(data, {
data: data_you_want_to_pass_to_template
});
this.$el.html(template);
}, 'html');
As for extending this to your code :
var cld_view=Backbone.View.extend({
el:'template_div',
initialize: function(){
},
render: function(){
// Compile the external template file using underscore
$.get(App.baseUrl + 'templates/your-template-file.html', function (data) {
template = _.template(data, { });
this.$el.html(template);
}, 'html');
}
});
App.baseUrl
- My full path of the project root which is set as config. You can either resuse this or remove this. But just make sure, you point to the exact template folder.
You need to specify your el
tag, else you would need to hard-code the div you are focusing to render the template.
Cheers
sachin_ware
Updated on June 05, 2022Comments
-
sachin_ware almost 2 years
I am very new to backbone.js ,I am practicing to display templates in my 'index.html' page. I have created a template in In 'index.html' and displaying it in a using view.It works fine with single html file i.e. everything is kept in 'index.html'.But now i want those templates to store in other file and display in my 'index.html'. I tried to find some solution ,but all were confusing. SO please, can anyone tell me how should i do it.
Following is my template to be display(currently in a 'index.html'):
<script type="text/template" id="cloudtag_tempalte"> <center> <ul class="cld" "> <li > <a class="tag1" id="t1" href="https://www.google.com" target="_blank"></a> </li> <li > <a class="tag2" id="t2" href="#">sachin </a> </li> <li > <a class="tag3" id="t3" href="#">Ramesh </a> </li> <li > <a class="tag1"id="t33" href="#">Tendulkar</a></li> <li > <a class="tag5"id="t34" href="#">Cricket</a></li> <li > <a class="tag2"id="t35" href="#">Test</a></li> </ul><!--/cld--> </center> </script>
Following is a div in which it is displayed(in same 'index.html'):
<div class="tags" id="myTags"> </div><!--/tags-->
and following is script of view(in same file 'index.html'):
<script type="text/javascript"> var cld_view=Backbone.View.extend({ initialize: function(){ }, render: function(){ // Compile the template using underscore var template = _.template( $("#cloudtag_tempalte").html(), {} ); // Load the compiled HTML into the Backbone "el" this.$el.html( template ); } }); var cloudtag=new cld_view({el:$("#myTags")}); cloudtag.render(); </script>
So please, suggest me changes to be made to make this template external . Thanx in advence . . .
-
sachin_ware over 10 yearsThanx @Roy M J, should i create a separate .js file to put above code, or it would be good to keep it in the 'index.html' file.
-
Roy M J over 10 yearsIts always good to separate your js & css from the html.. :)... Just out of curiosity, are'nt you separating all your view,model,collection,router code into separate js files??