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

Question

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 . . .

score 8 · Accepted Answer

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

score 0 · Accepted Answer

I attach my compiled templates to the object itself. You can append extra templates to the main template

<script type="text/javascript">
var cld_view=Backbone.View.extend({

        //compiled templates
        template : _.template($("#cloudtag_tempalte").html()),
        template2 : _.template($("#another_template").html()),

        initialize: function(){

        },

        render: function(){
            // Load the compiled HTML into the Backbone "el"
            this.$el.html( this.template);

            //add other templates to the main one.
            this.$el.find('someSelector').append(template2 );

        }

    });

    var cloudtag=new cld_view({el:$("#myTags")});
    cloudtag.render();
</script>

score 0 · Accepted Answer

.Finaly i found the solution to my problem after struggling 2 days to create and display external templates in my 'index.html' page using backbone.js.

For that i used underscore js. Here is the process that i followed to successfully run my application:

i followed the tutorial mentioned in this video.

I created a separate template file called 'CloudTagTemplate.html' and pasted the html code mentioned in the above question in this file and saved in Templates folder where i am going to store other templates later on:

my CloudTagTemplate.html:

<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="#"></a>     </li>
            <li  >      <a class="tag3"  id="t3"  href="#"></a>     </li>
            <li  >      <a  class="tag2" id="t4"  href="#"></a>      </li>
            <li  >      <a  class="tag4" id="t5"  href="#"></a>       </li>
            <li  >      <a  class="tag1" id="t6"  href="#"></a>       </li>
            <li  >      <a  class="tag1" id="t7"  href="#"></a>      </li>
            <li  >      <a  class="tag5"id="t8"  href="#"></a>      </li>
            <li  >      <a  class="tag2"id="t9"  href="#"></a></li>
            <li  >      <a  class="tag1"id="t10" href="#"></a></li>
            <li  >      <a  class="tag3"id="t11" href="#"></a></li>
            <li  >      <a  class="tag4"id="t12" href="#"> </a></li>
            <li  >      <a  class="tag1"id="t13" href="#"></a></li>
            <li  >      <a  class="tag5"id="t14" href="#"></a></li>
            <li  >      <a  class="tag1"id="t15" href="#"></a></li>
            <li  >      <a  class="tag2"id="t16" href="#"></a></li>
            <li  >      <a  class="tag1"id="t17" href="https://www.google.com"></a></li> 
            <li  >      <a  class="tag2" id="t18" href="#"></a></li>
            <li  >      <a  class="tag3"id="t19" href="#"></a></li>
            <li  >      <a  class="tag2"id="t20" href="#"></a></li>
            <li  >      <a  class="tag4"id="t21" href="#"></a></li>
            <li  >      <a  class="tag1"id="t22" href="#"></a></li>
            <li  >      <a  class="tag1"id="t23" href="#"></a></li>
            <li  >      <a  class="tag5"id="t24" href="#"></a></li>
            <li  >      <a  class="tag2"id="t25" href="#"></a></li>
            <li  >      <a  class="tag1"id="t26" href="#"></a></li>
            <li  >      <a  class="tag5"id="t27" href="#"></a></li>
            <li  >      <a  class="tag3"id="t28" href="#"> </a></li>
            <li  >      <a  class="tag1"id="t29" href="#"></a></li>
            <li  >      <a  class="tag3"id="t30" href="#"></a></li>
            <li  >      <a  class="tag1"id="t31" href="#"></a></li>
            <li  >      <a  class="tag4"id="t32" href="#"></a></li>
            <li  >      <a  class="tag1"id="t33" href="#"></a></li>
            <li  >      <a  class="tag5"id="t34" href="#"></a></li>
            <li  >      <a  class="tag2"id="t35" href="#"></a></li>

            </ul><!--/cld-->
     </center>

Then i created a CloudTagView.js in View Folder:

my CloudTagView.js:

 var cld_view=Backbone.View.extend({
       el:'#myTags',
       initialize: function(){
       },
       render: function(){

            var that=this;
            $.get( '/multipage/Backbone/Templates/CloudTagTemplate.html', function (data) {
                template = _.template(data, {  });
                that.$el.html(template);  
            }, 'html');

        }

    });

    var cloudtag=new cld_view();
    cloudtag.render();

note that -

 var that=this;

is important to put over there ,since we are defining anonymous function $.get()

and at last i linked all these required files in my 'index.html' as:

<script src="Backbone/Views/CloudTagView.js"></script>
<script src="Backbone/Views/LoginModalView.js"></script>

and finally it worked fine as i wanted. . Thanx to @Roy M J

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

3 回答 3

Related

Reference