3

my application templates are working if they are declared within index.html file. But, I want to keep all templates in different html file, like, -AppTmpl.html

<!-- SidebarView Template -->
<script id="sideBarTmpl" type="text/template">
   <div class="inner_div"><img src="images/com_logo.png"></div>
   <div class="inner_div"><img src="images/adv_index.png"></div>
</script> 

<!-- HeaderView Template -->
<script id="folderDivTmpl" type="text/template">
   <div id="div_<%= menu_sequence %>"></div>
</script>

I am using underscore templates. But problem is that these templates are not accessible by underscore. like, this.template = _.template($("#headerTmpl").html(), this.model.toJSON());

So what i need to do like include "AppTmpl.html" file in index.html or something. Any solutions?

Thanks in advance !

mayur
  • 206
  • 2
  • 15
  • Here's one solution [Require.js](http://stackoverflow.com/a/11979513/972393), here's another [External Template Underscore](http://stackoverflow.com/questions/8366733/external-template-in-underscore) This question is possibly a duplicate. – jmk2142 Sep 20 '12 at 07:29
  • @orangewarp there are actually a few others, for example http://stackoverflow.com/q/9834714/384985 and http://stackoverflow.com/q/8995702/384985. However they all seem to have some issues, for example using a *js* file instead of a `html` file (the difference being that if you use a *js* file you need to escape the end-of-lines, and you lose the syntax highlighting in your IDE). – Jack Sep 20 '12 at 14:27

1 Answers1

2

I use requireJS with the text plugin

Then you can just load it as you need with requireJS:

require(['text!templates/AppTmpl.html'],function(AppTemplate){

     this.template = _.template(AppTemplate);

});
Ingro
  • 2,841
  • 5
  • 26
  • 42
  • thanx ingro !! But I don't want html files for each template. As i written all templates should be in one html file other than index.html – mayur Sep 20 '12 at 08:04
  • Well so I think the best solution would be to create a js file with each template assigned to a different variable, like Tmpl.AppTemplate, Tmpl.GridTemplate etc... This js file has to be included before your App so you can access templates in this way: `this.template = _.template(Tmpl.AppTemplate)` and so on... – Ingro Sep 20 '12 at 08:15