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 totrue
- 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>
- Converting values to booleans is supported:
-
<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 theif
condition is not satisfied and theelseif
condition is.
Todo
- [x]
Addsort
attribute to<iterate></iterate>
- [x]
Add<else></else>
element - [x]
Add<elseif></elseif>
element - [x]
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