curet v0.2.1

curet: Cure Template

Overview

curet (Cure Template) is a small template engine for JavaScript.

“渾沌のJS業界に咲く一輪の花、キュア・テンプレート！”

curet requires ES2015 template literal and tag function features.

Usage

  <div id="placeholder"></div>

  <script type="text/template" id="tmpl1">
    <table border="1">
      <tbody>
        <!--% for (var i = 0; i < this.items.length; i++) { %-->
        <!--%   let x = this.items[i]; %-->
        <tr id="row-${i}">
          <th>${x.id}</th>
          <td>${x.name}</td>
        </tr>
        <!--% } %-->
      </tbody>
    </table>
  </script>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="./curet.js"></script>

  <script>
  $(function() {
    /// create context data
    let context = {
      items: [
        {id: 111, name: "<Alice>&<Bob>"}
      , {id: 222, name: "Bob"}
      , {id: 333, name: "Charlie"}
      ]
    };
    /// render template with context data
    let html = curet.render('#tmpl1', context);
    $('#placeholder').html(html);
    /// or
    $('#tmpl1').renderWith(context, '#placeholder');
  });
  </script>

Tips:

Changing embedded statement pattern:

/// use '%% ... %%' instead of '<!--% ... %-->'
curet.STATEMENT_REGEXP = /(^[ \t]*)?%%([\s\S]*?)%%(\n?)/mg;

Errors:

If template selector is wrong, you may got an error. For example:

<script id="tmpl-ex1" type="text/template">
  <p>${this.value}</p>
</script>

<script>
//let $t = $('#tmpl-ex1');   // collect
let $t = $('tmpl-ex1');      // wrong
let context = {value: 12345};
$t.renderWith(context, '#placeholder');
  //=> error: $('tmpl-ex1').renderWith(): missing template element.
</script>

License

MIT License

Copyright

copyright(c) 2018 Kauplan Agency all rights reserved.