CODEWITHSUNDEEP
javascripthtmlunderscore.js
ashwin
ashwin

Reputation: 65

underscore code displays nothing on webpage

I am a beginner to underscore and this code snippet displays a blank webpage instead of a template. So I would be really helpful if someone could help me out :)

summa.html

<html>
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <meta charset="utf-8">
</head>
<body>

    <div class="tangent"></div>
      <script type="text/template" id="temp">
    <h1><%= head %></h1>
    </script>

    <script type ="text/javascript" id="tem">
        var head = "hii";
        //var head2 = "hello";

        var templ = $('#temp').html() ;
        $('#tagent').html(_.template(templ,{head:head}));        
    </script>
</body>

running this on my mozilla and the console shows these message GET http://localhost/summa.html [HTTP/1.1 304 Not Modified 5ms] GET http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js [HTTP/1.1 304 Not Modified 232ms] GET http://code.jquery.com/jquery-latest.min.js [HTTP/1.1 304 Not Modified 556ms] I googled and I know this is not a error message or a problem. So what is the place I have made my mistake ?? thank you in advance

Upvotes: 2

Views: 75

Answers (1)

Amaury Medeiros
Amaury Medeiros

Reputation: 2233

There are a few things you're doing wrong.

First, you have to pass your template html to _.template and assign it to a variable. This variable stores a reference to a function and you then call it passing {head:head} as parameter. Finally, you are trying to select your tangent div by id (using #). As you only define the class of this element, you should select it using ..

I think this is what you're looking for:

<html>
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <meta charset="utf-8">
</head>
<body>

    <div class="tangent"></div>
      <script type="text/template" id="temp">
    <h1><%= head %></h1>
    </script>

    <script type="text/javascript" id="tem">
        var head = "hii";
        //var head2 = "hello";

        var templ = $('#temp').html();
        var template = _.template(templ);
        $('.tangent').html(template({head:head}));
    </script>
</body>

Upvotes: 1

Related Questions