Skip to content
This repository was archived by the owner on Nov 22, 2018. It is now read-only.

string templates, expression context support, t-with, t-as, t-skip

Choose a tag to compare

@shawnbot shawnbot released this 19 Nov 19:49
· 64 commits to master since this release
  1. tagalong.render() now accepts an optional third parameter, the context, the properties of which are "global" to all evaluated expressions in that template:

    <div id="template">
      <section t-id="'section-' + ids[id]">hi</section>
    </div>
    <script>
    tagalong.render('#template', {id: 'foo'}, {ids: {foo: 123}});
    </script>

    In this example, the expression 'section-' + ids[id] would be evaluated with id = 'foo' and ids = {foo: 123}, which produces section-123. The context can expose helper functions that are also available in expressions.

  2. DOM text can now include Mustache-like {{ expression }} placeholders, which will be evaluated just like any other expression.

  3. The t-with attribute establishes a new data context for child elements. This can keep your expressions DRY:

    <div id="template">
      <h1 t-with="sections">{{ length }} section{{ length === 1 ? '' : 's' }}</h1>
      <section t-each="'sections" t-id="section-{{ . }}"></section>
    </div>
    <script>
    tagalong.render('#template', {sections: [1, 2, 3]});
    </script>
  4. The t-as attribute allows you to alias the value of an expression to a new variable (symbol) in nested expressions. See the wiki for more info.

  5. The t-skip attribute tells tagalong to never render that element. This is useful if you've used a sever-side template system to generate a list of elements, but only want to use the first one as the "template" for dynamic data:

    <div id="template">
      <ul>
        <li t-each="people" t-text=".">Jane</li>
        <li t-skip>Joe</li>
        <li t-skip>Jacquelyn</li>
      </ul>
    </div>
    <script>
    tagalong.render('#template', {people: ['Jackie']});
    </script>