1

I am using jsrender as the JavasScript template engine. The usage is quite straightforward:

In HTML Page, define a script tag with template-ed HTML content:

<script id="myTemplate" type="text/x-jsrender">
    <div>{{:name}} ({{:year}})</div>
</script>
...
<body>
<div id="content"></div>
</body>

In JavaScript, define a variable, and call render function against the template:

var model = {
    name: "Findekano",
    year: 2012
};

$('#content').html($('#myTemplate').render(model));

The question is:

I do not want to keep the template definition in the host HTML page, I'd like to keep it in a separate file along with the JavaScript file so it can be more modular.

I'd like to have something to work as below:

<script id="myTemplate" 
        type="text/x-jsrender" 
        src="template/myTemplate.html">
</script>

where myTemplate.html defines the necessary HTML template snippet. I tried the code above but it doesn't work. Could anyone suggest an alternative way to solve the problem?

Jay Zhu
  • 1,636
  • 13
  • 17
  • Well, have you tried it? It probably took you longer to write the question than it would to actually try it. – TheZ Jul 10 '12 at 16:10
  • @TheZ: Yes I tried it, and it doesn't work. I am posting the question to see if anyone can recommend an alternative way :-). I've updated the question to reflect that. – Jay Zhu Jul 10 '12 at 16:19
  • this is a duplicate of [Store a jsRender template in a separate js file](http://stackoverflow.com/questions/10413894/store-a-jsrender-template-in-a-separate-js-file). Sorry about that – Jay Zhu Jul 10 '12 at 16:32
  • If you're comfortable with an ajax request, then yes, that is a viable solution. – TheZ Jul 10 '12 at 16:38
  • 1
    If you are serious about using microtemplates, I suggest that you use a better templating engine, e.g. Handlebars, and precompile them (whicj turns them into JS functions) and require them using RequireJS – mvbl fst Jul 10 '12 at 17:12

2 Answers2

0

If you do not want to have to use an AJAX call and using a more memory doesn't concern you, there is at least one alternative solution I can think of. AJAX might be cleaner, but I thought I'd put this out there anyways.

document.write('<script id="myTemplate" type="text/x-jsrender"><div>{{:name}} ({{:year}})</div></script>');

If you put that into an external file and link it via

<script type="text/javascript" 
    src="template/myTemplate.js">
</script>

Then the script will append a valid script tag copy of the string to the DOM that jsrender can actually access. Of course, this does end up using roughly double the memory on the client but... if it's not too big of a file it shouldn't be a problem.

TheZ
  • 3,663
  • 19
  • 34
0

Browsers won't download scripts in languages they do not (internally) support (based on the type attribute).

Get the URI from the src attribute, then request the resource with XHR.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Untrue. If you examine the Network tab of Firebug and/or Chrome Dev Tools while loading the HTML in the OP, you will see that the contents of `template/myTemplate.html` are indeed requested by the browser and transferred over the network. They are simply not available to jsRender for some reason. – Maxy-B Dec 18 '12 at 21:31