string templates, expression context support, t-with, t-as, t-skip
-
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 withid = 'foo'andids = {foo: 123}, which producessection-123. The context can expose helper functions that are also available in expressions. -
DOM text can now include Mustache-like
{{ expression }}placeholders, which will be evaluated just like any other expression. -
The
t-withattribute 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>
-
The
t-asattribute allows you to alias the value of an expression to a new variable (symbol) in nested expressions. See the wiki for more info. -
The
t-skipattribute 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>