Skip to content

Instantly share code, notes, and snippets.

Embed
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:

<head>
  ...
  <meta name="tmpl" content="searchresult">
</head>

..and then in JS:

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

if( tmplmeta ){
  var tmpl = tmplmeta.content;
}

...now 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:

yepnope({
  test: tmpl === "searchresult"
  yep: "js/searchresult.js"
});
@jlbruno

This comment has been minimized.

Copy link

commented Jan 25, 2013

Any downsides you've come across?

@benedfit

This comment has been minimized.

Copy link

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

@scottjehl

This comment has been minimized.

Copy link
Owner Author

commented Jan 25, 2013

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

@benedfit:

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.