Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Template meta tag pattern for template-based decisions

I've been finding this little meta[name='tmpl'] pattern useful lately when making template-based decisions in JS, such as when loading a particular file or set of files that are needed only on a particular page of a site.

First, in the HTML of a particular template, like say, a search result page:

  <meta name="tmpl" content="searchresult">

..and then in JS:

var tmplmeta = document.querySelector && document.querySelector( "meta[name='tmpl']" );
var tmpl;

if( tmplmeta ){
  var tmpl = tmplmeta.content;
} tmpl can be used just like you might use other feature or environmental tests, such as perhaps when loading files via a tool like yepnope.js:

  test: tmpl === "searchresult"
  yep: "js/searchresult.js"

This comment has been minimized.

Copy link

jlbruno commented Jan 25, 2013

Any downsides you've come across?


This comment has been minimized.

Copy link

benedfit commented Jan 25, 2013

I've tended to use a class on the html or body tag for this in the past to kill the figurative CSS and JS birds with one stone


This comment has been minimized.

Copy link
Owner Author

scottjehl commented Jan 25, 2013

@jlbruno: none I've really run into, no.


A couple of thoughts:

  • body tag class names can't easily be used in head-referenced script loaders without waiting for the body tag to be ready/defined, so that's been a little annoying in the past for me.
  • html element works great for this, but if you need to use something like the HTML5 boilerplate multi-html tag setup, then you have to repeat the class several times.

I like having one system regardless of html tag approaches, so it's been nice from that perspective

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.