simplate.test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simplate Test</title>
    <style media="screen">
      html, body { margin: 0; padding: 0; }
      #spl-demo {
        width: 720px;
        height: 100%;
        margin: 0 auto;
        /*padding: 48px 0 0 0;*/
      }
    </style>
  </head>
  <body>
    <div id="spl-demo"></div>


    <script src="./simplate.js" charset="utf-8"></script>
    <script id="simplate" type="text/html">
      <h1>Simplate Demo</h1>

      <h2>基本输出</h2>
      <p>Hi, I am {{= data.name }},</p>
      <p>a {{= data.age || '' }} year-old front-end developer.</p>

      <h2>非编码输出</h2>
      Repo: <a href="{{! data.url }}">{{! data.url }}</a>
      <p>{{! data.p }}</p>

      <h2>循环输出</h2>
      <ul>
        {{ for( var prop in data ) { }}
          <li>{{= prop }}</li>
        {{ } }}
      </ul>

      <h2>条件输出</h2>
      {{ if ( data.isShow ) { }}
        <p>{{= data.showContent }}</p>
      {{ } }}

      <h2>注释</h2>
      <p>You cannot see!</p>
      {{# 一段注释 }}
    </script>
    <script type="text/javascript">
      var data = {
        name: 'Phantr4x',
        age: 21,
        url: 'https://github.com/Phantr4x/Simplate',
        p: '<p>A snippet of HTML.</p>',
        isShow: true,
        showContent: "You see!"
      }

      var simplateTmpl = simplate.template(document.getElementById('simplate').innerHTML);
      // console.log(simplateTmpl);
      document.getElementById('spl-demo').innerHTML = simplateTmpl(data);
    </script>
  </body>
</html>