O'Reilly logo

Developing Web Components by Jason Strimpel, Jarrod Overson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 10. Utilizing Templates

As you read the title of this chapter you might have thought to yourself, “But we already have client-side templates for rendering markup!” Here’s an example:

<script id="some-template" type="text/x-handlebars-template">
    <p class="description">{{description}}</p>
</script>
<div id="some-template" style="display: none;">
    <p class="description">{{description}}</p>
</div>
function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
  var buffer = "", stack1, helper, functionType="function",
  escapeExpression=this.escapeExpression;


  buffer += "<div id=\"some-template\" style=\"display: none;\">";
  buffer += "<p class=\"description\">";
  if (helper = helpers.description) {
  stack1 = helper.call(depth0, {hash:{},data:data}); }
  else { helper = (depth0 && depth0.description);
  stack1 = typeof helper === functionType ?
  helper.call(depth0, {hash:{},data:data}) : helper; }
  buffer += escapeExpression(stack1)
    + "</p></div>";
  return buffer;
  }

While these approaches allow you to utilize templates on the client, they have their drawbacks. This is because they are really just workarounds designed to implement a missing feature: native templates in the browser. The good news is that this feature is no longer missing. It is now a W3C specification and is running in some of the latest browser versions. This new specification will allow you to begin writing native ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required