Declarative template engine for the browser and server with regular JS syntax.
You can redefine or extend just a particular part of output not only by simple redefinition via new templates but also using ‘modes’. E.g. it may be a tag name or its content.
'span';// The template sets tag to `span` for all `link` blocks.// And tag() mode can be redefined if any condition passed.'a';// The template sets tag to `a` only if block `link` have `url` field.// Otherwise tag will be ‘span’ as previous template says.
Templates are written using pattern matching for the values and structure of input data
We can apply these two declarative-style templates templates to data:
block: 'list'content:block: 'item'content:block: 'list'content:block: 'item' content: 'CSS'block: 'item' content: 'HTML'block: 'item'content:block: 'list'content: block: 'item' content: 'JS'
The result is:
As you can see templates are as simple as CSS.
In the example above you may have noticed that bem-xjst automaticaly traverses input data by
content fields. This behaviour is default feature of bem-xjst.
Built-in rendering behavior is used by default, even if the user didn’t add templates. Even without templates. For example from above it will be:
That is more than half of the work ;) You will add the salt (couple of templates for tags) and the HTML-soup is very tasty!
Online demo allows you to share code snippets, change versions and etc. Happy templating!
npm install bem-xjst