how to create and display external template in html page using Backbone.js?

16,248

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 :

  1. Handlebars
  2. Marionette

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

Share:
16,248
sachin_ware
Author by

sachin_ware

Updated on June 05, 2022

Comments

  • sachin_ware
    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
    sachin_ware over 10 years
    Thanx @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
    Roy M J over 10 years
    Its 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??