Loading Underscore templates in HTML

Question

I am trying to load templates from a file into an HTML file using a script tag. I want to use this as a template in UnderscoreJS - but I'm not able to load the file:

//main.js

    this.template = _.template($("#add-question").html());
            console.log("testing");
            console.log(this.template({
                question: "How are you doing?",
                yesOrNo: true
            }))

//console output:

    testing      Main.ts:37
                 Main.ts:38


    //main html file:

    <html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <head>
        <script type="text/template" id="add-question" src="client/add-new-question.html"></script>
    </head>
    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" type="text/javascript"></script>
    <script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
    <script data-main="main.js" src="build/require.js"></script>

    </body>
    </html>

// client/add-new-question.html

    <form id="testForm">
        <span>"<% question %></span>
        <input id="questionInput" type="text">
        <span>"<% yesOrNo %></span>
        <input id="typeInput" type="checkbox">
    </form>

Update: Here's the updated HTML in in which I've tried loading the html though a script tag in the body. Still doesn't work. This is how its expected to be done when rendering the template with UnderscoreJS. I want to be able to load the template with requireJS but render it using the underscoreJS template function.

<body>
<script type="text/template" id="add-question">
    <form id="testForm">
        <span>"<%= question %></span>
        <input id="questionInput" type="text">
        <span>"<%= yesOrNo %></span>
        <input id="typeInput" type="checkbox">
    </form>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script data-main="main.js" src="build/require.js"></script>
</body>

Hi Try <%= %> instead of <% %>. – 5122014009 Jan 29 '14 at 08:24 — 5122014009, Jan 29 '14 at 08:24
@Sayuri Tried. Same result – EternallyCurious Jan 29 '14 at 14:05 — EternallyCurious, Jan 29 '14 at 14:05

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

You have to use <%= to output variables instead of <%.

It looks like you are using requirejs.
So you could also use the tpl extension and store your underscore template in .tpl files:

https://github.com/ZeeAgency/requirejs-tpl

define(['tpl!client/add-new-question.html'], function(tpl) {

        console.log(tpl({
            question: "How are you doing?",
            yesOrNo: true
        }));

});

Links:
How to use underscore.js as a template engine? and underscore.js

edited May 23 '17 at 10:25

Community

1
1

answered Jan 29 '14 at 08:25

jantimon

36,840
23
122
185

I'd like to use requireJs to load templates but Underscore to render them. How do I do that? Secondly I'm using the method described for loading temples with Underscore, but its not working. Please see update in the question. – EternallyCurious Jan 29 '14 at 14:04
the tpl extension is already using the template engine of underscorejs – jantimon Jan 29 '14 at 16:01
I'm getting "Uncaught ReferenceError: define is not defined". Can we use "require" instead of "define"? – EternallyCurious Jan 29 '14 at 16:46
In the above statement, I'm not sure how to pass the data to the template to get the html that can be rendered. – EternallyCurious Jan 29 '14 at 17:27

Loading Underscore templates in HTML

1 Answers1