Easy JavaScript Templating

M@dHatter

4.86/5 (4 votes)

8 Jan 2014CPOL

8.8K

Below is an easy way to create Templates in JavaScript without changing the code format.

Introduction

Below is an easy way to create Templates in JavaScript files without changing your code format. edit

Background

I needed an easy way to keep my HTML clean and formated properly, when added to JavaScript files. So I came up with the following solution that seems to work well.

Using the code

All you need is the function below to keep your code clean.

JavaScript

// Loads formatted code from a JavaScript string variable.
function template(t) { return t.toString().replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, ''); }

Easy JS Templates

To create nice looking, easy to read, easy to manage templates, follow the examples below. You won't have to worry about single or double quotes terminating your strings. Post between /*! and */ and everything should work fine.

JavaScript

// HTML Template Example
var html = template(function() {/*!

<html>
  <head>
    <title>JavaScript Easy Templating</title>
  </head>
  <body>
    <a id="test" href="http://www.codeproject.com">http://www.codeproject.com</a>
  </body>
</html>

*/});

// CSS Template Example
var css = template(function() {/*!

<style type="text/css">

  #test
  {
    color: red;
  }

</style>

*/});

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)