John Resig<\/a> was the first to document a technique for storing templates in <script> tags;<\/p>\n This works well for several reasons;<\/p>\n Today there are many libraries available for retrieving and building templates in this way, such as Mustache.js<\/a> and ICanHaz.js<\/a>, and more that integrate support.<\/p>\n One of the only problems with this technique, is that the scripts must be declared inline.<\/p>\n If the browser doesn’t understand the type, it won’t load the source. Whatever the reason, the template text is never added to the DOM.<\/p>\n Inlining template contents is detrimental to readability, maintainability, and traceability.<\/p>\n Some libraries offer asynchronous methods for loading templates. (require.js among them) Some have issues with complexity and performance.<\/p>\n It feels natural to define and compile <\/strong>the template functions at class definition time. Other solutions may add unnecessary layers of indirection.<\/p>\n I’ll preface this by saying “Okay, maybe this won’t work for you”<\/em>, but so far it’s working well, transparently, and fast. And when you go to production, a decent deployment optimisation process will inline the templates anyway.<\/p>\n What if the src attributes were <\/strong>read properly?<\/p>\n Just insert this code after<\/strong> all your template tags, and before<\/strong> you build your template functions, and you’ll be able to treat them as if they were inline all along.<\/p>\n Easy.* \ud83d\ude42<\/p>\n *There are some downsides to loading template serially and synchronously. I’ve written a follow-up article that discusses a technically better solution<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Background John Resig was the first to document a technique for storing templates in <script> tags; <script type="text\/html" id="item_template"> <li><b>{{ name }}<\/b> – {{ description }}<\/li> <\/script> This works well for several reasons; Using the unknown type “text\/html” means that … Continue reading <script type="text\/html" id="item_template">\r\n <li><b>{{ name }}<\/b> - {{ description }}<\/li>\r\n<\/script><\/pre>\n\n
\/\/Build a new item, and add it to the list\r\n\/\/Using JQuery, Underscore.js\r\nvar contents = _.template(\r\n $("#item_template").html(),\r\n {name: "Foo", description:"Sir Foo the Second"}\r\n);\r\n$list.append( $(contents) );<\/pre>\nProblem<\/h1>\n
<!-- Works! -->\r\n<script type="text\/html" id="item_template">\r\n <li><b>{{ name }}<\/b> - {{ description }}<\/li>\r\n<\/script>\r\n\r\n<!-- Doesn't work. -->\r\n<script type="text\/html" id="item_template2" \r\n src="templates\/item2.html"><\/script><\/pre>\nSolution<\/h1>\n
<script type="text\/html" id="template_widgets"\r\n src="templates\/widgets.html"><\/script>\r\n<script type="text\/html" id="template_widgets_item \r\n src="templates\/widgets_item.html"><\/script>\r\n...\r\n...\r\n<script type="text\/javascript">\r\n \/\/Synchronously load the templates\r\n var $templates = $('script[type="text\/html"]');\r\n $templates.each(function() { \r\n \/\/Only get non-inline templates\r\n \/\/No need to change code for production.\r\n if ($(this).attr("src")) { \r\n $.ajax(\r\n $(this).attr("src"), \r\n {\r\n async:false, \r\n context:this, \r\n success:function(data) { $(this).html(data); }\r\n }\r\n );\r\n }\r\n });\r\n \/\/From this point onwards (in the same script, in the \r\n \/\/following scripts) all the "text\/html" script tags \r\n \/\/will be loaded as if they were inline.\r\n<\/script><\/pre>\n