sumo-templates

Sumo

An HTML-ish JavaScript templateing system. This is a work in progress. See the todo list at the bottom to see what still needs to be done.

<!-- List users by name -->
<h1>User List</h1>
<p>Total users: <count collection="people" /></p>

<ul>
  <iterate 
    collection="people as person, index" 
    sort="name asc">

    <li id="person-{{person.id}}">
      <h2>{{(index + 1)}}. {{person.name}}</h2>


      <if condition="person.age || person.eyeColor">
        <h3>Personal Data:</h3>
        <ul>
          <if condition="person.age">
            <li>{{person.age}}</li>
          </if>
          <if condition="person.eyeColor">
            <li>{{person.eyeColor}}</li>
          </if>
        </ul>
      </if>

      <if condition="person.friends.length">
        <ul>
          <iterate 
            collection="person.friends as friend" 
            sort="name asc">

            <li id="{{friend.id}}">{{friend.name}}</li>

          </iterate>
        </ul>
        <else>
          {{person.name}} has no friends :`(
        </else>
      </if>

    </li>

  </iterate>
</ul>

Usage

var myData = {
  someArr: [1, 2, 3]
};

var myTemplate = '<count collection="someArr" />';

var myOutput = sumo.compile(myTemplate, myData);
// myOutput is now '3'

Available Elements

• <count collection="collectionName" />: Counts the number of elements in an array or object
• <iterate collection="collectionName[ as value[, key]"></iterate>: Iterates over an array or object
  • Access to the current item can be gained through the name {{this}} or the name provided
  • Access to the current index or key can be gained through the name {{key}} or the name provided
  • Sorting can be achieved through the sort attribute like so:
    • sort="asc|desc": sort arrays or single level objects ascending or descending by value
    • sort="property asc|desc": sort an array of objects or an object of objects by property name
    • sort="property.key asc|desc": sort an array of objects or an object of objects by nested property name
• <if condition="conditionalExpression"></if>: Displays content only if the provided condition evaluates to true
  • Converting values to booleans is supported: <if condition="myArr.length">This is true</if>
  • Comparison and logical operators are supported: ==, ===, !=, !==, !, ||, &&, >, <, >=, <=
  • Compound expressions are supported: <if condition="valTrue && !(valFalse && valEmptyStr && val0)">This is true</if>
• <else></else>: When nested in an <if></if> element, the content within <else></else> will be displayed when the condition is not satisfied.
• <elseif condition="conditionalExpression"></elseif>: When nested in an <if></if> element, the content within <elseif></elseif> will be displayed when the if condition is not satisfied and the elseif condition is.

Todo

• Add sort attribute to <iterate></iterate>
• Add <else></else> element
• Add <elseif></elseif> element
• Add support for nesting elements
• Add support for simple computation in if conditions, ie: <if condition="(index + 1) === myArr.length"></if>
• Add support for simple computation in template strings, ie: {{(index + 1)}}
• Add config setting for turning off error output
• Add better documentation
• Add a way to determine you're on the first or last item in a collection while iterating
• Find a way to clean up / improve efficiency of nested element processing