{"id":3315,"date":"2011-12-12T07:00:56","date_gmt":"2011-12-12T12:00:56","guid":{"rendered":"http:\/\/www.ericfeminella.com\/blog\/?p=3315"},"modified":"2016-03-30T14:44:59","modified_gmt":"2016-03-30T18:44:59","slug":"external-templates-in-jqote2","status":"publish","type":"post","link":"https:\/\/www.ericfeminella.com\/blog\/2011\/12\/12\/external-templates-in-jqote2\/","title":{"rendered":"External Templates in jQote2"},"content":{"rendered":"<p>The <a href=\"http:\/\/aefxx.com\/api\/jqote2-reference\/\" target=\"_blank\">jQote2 API Reference<\/a> provides plenty of useful examples which are sure to help users get up and running quickly. I found it a bit unclear, though, as to how templates could be loaded externally as, in the reference examples, templates are defined within the containing page. For the sake of simplicity this approach certainly makes sense in the context of examples. However, in practice, templates would ideally be loaded externally. <\/p>\n<p>While <a href=\"http:\/\/aefxx.com\/jquery-plugins\/jqote2\/\" target=\"_blank\">jQote2<\/a> provides a perfect API for templating, it does not provide a method specifically for loading external templates; this is likely due to the fact that loading external templates could easily be accomplished natively in <a href=\"http:\/\/jquery.com\/\" target=\"_blank\">jQuery<\/a>. However, since this is a rather common development use case, having such a facility available would be quite useful.<\/p>\n<p>After reviewing the comments I came across a nice example from <a href=\"http:\/\/aefxx.com\/\" target=\"_blank\">aefxx<\/a> (the author of jQote2) which demonstrated a typical approach to loading external templates which was simular to what I had been implementing myself. <\/p>\n<p>And so, I wrote a simple jQuery Plug-in which provides a tested, reusable solution for loading external templates. After having leveraged the Plugin on quite a few different projects, I decided to open source it as others may find it useful as well.<\/p>\n<h2>Using the Plugin<\/h2>\n<p>Using the jQote2 Template Loader plugin is rather straight forward. Simply include <a href=\"http:\/\/jquery.com\/\" target=\"_blank\">jQuery<\/a>, <a href=\"http:\/\/aefxx.com\/jquery-plugins\/jqote2\/\" target=\"_blank\">jQote2<\/a> and the <a href=\"https:\/\/github.com\/efeminella\/jqote2-template-loader\/blob\/master\/jquery.jqote2.loader-min.js\" target=\"_blank\">jquery.jqote2.loader-min.js<\/a> script on your page.<\/p>\n<p>As a basic example, assume a file named <code>example.tpl<\/code> exists, which contains the following template definition:<\/p>\n<pre lang=\"Javascript\">\r\n<script type=\"text\/html\" id=\"articles_tpl\">\r\n  <![CDATA[\r\n    <% var article, i, n; \r\n      for ( i = 0, n = this.articles.length; i < n; i++ ) {\r\n        article = this.articles[i]; \r\n     %>\r\n    <article>\r\n      <header>\r\n        <h1><%= article.name %><\/h1>\r\n      <\/header>\r\n      <p><%= article.text %><\/p>\r\n    <\/article>\r\n   <% } %>\r\n  ]]>\r\n<\/script>\r\n  \r\n<\/pre>\n<p>We can load the <code>example.tpl<\/code> template file described above via <code>$.jqoteload<\/code> as follows:<\/p>\n<pre lang=\"Javascript\">\r\n$.jqoteload('example.tpl', function(templates) {\r\n  \/\/ create some mock articles...\r\n  var articles = [{\r\n    name: 'Article A',\r\n    text: 'Articles A test...'\r\n  }, {\r\n    name: 'Article B',\r\n    text: 'Articles B test...'\r\n  }, {\r\n    name: 'Article C',\r\n    text: 'Articles C test...'\r\n  }];\r\n  \/\/ Render the articles...\r\n  $('#articles').jqoteapp(templates.articles_tpl, {\r\n    'articles': articles\r\n  });\r\n});\r\n<\/pre>\n<p>After <code>example.tpl<\/code> has been loaded, from another context we can access the compiled templates via their template element <code>id<\/code>. In this example `&#8221;articles_tpl&#8221;`.<\/p>\n<pre lang=\"Javascript\">\r\n\/\/... within some other context, access the same \r\n\/\/ compiled template\r\nvar template = $.jqoteret( 'articles_tpl' );\r\n<\/pre>\n<p>You can grab the source and view the example over on the <a href=\"https:\/\/github.com\/efeminella\/jqote2-template-loader\">jQote2 Template Loader<\/a> Github page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The jQote2 API Reference provides plenty of useful examples which are sure to help users get up and running quickly. I found it a bit unclear, though, as to how templates could be loaded externally as, in the reference examples, templates are defined within the containing page. For the sake of simplicity this approach certainly makes sense in the context&#8230; <a class=\"read-more\" href=\"https:\/\/www.ericfeminella.com\/blog\/2011\/12\/12\/external-templates-in-jqote2\/\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[42,23,59,78],"tags":[65,68,171,67,172],"class_list":["post-3315","post","type-post","status-publish","format-standard","hentry","category-apis","category-design-patterns","category-html5","category-javascript-2","tag-html5-2","tag-javascript","tag-jqote2","tag-jquery-2","tag-templating"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/3315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/comments?post=3315"}],"version-history":[{"count":0,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/posts\/3315\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/media?parent=3315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/categories?post=3315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ericfeminella.com\/blog\/wp-json\/wp\/v2\/tags?post=3315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}