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.
block('link')({ tag: 'span' });
// The template sets tag to `span` for all `link` blocks.
// And tag mode can be redefined if any condition passed.
block('link').match((node, ctx) => ctx.url)({ tag: '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
block('list')({ tag: 'ul' });
block('item')({ tag: 'li' });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:
<ul class="list">
<li class="item">
<ul class="list">
<li class="item">CSS</li>
<li class="item">HTML</li>
</ul>
</li>
<li class="item">
<ul class="list">
<li class="item">JS</li>
</ul>
</li>
</ul>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:
<div class="list">
<div class="item">
<div class="list">
<div class="item">CSS</div>
<div class="item">HTML</div>
</div>
</div>
<div class="item">
<div class="list">
<div class="item">JS</div>
</div>
</div>
</div>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!
Written in JavaScript, so the entire JavaScript infrastructure is available for checking code quality and conforming to best practices.
Since templates is a regular JavaScript code you can use automatic syntax validator from your editor and tools like JSHint/ESLint.
You can use bem-xjst in any browser as well as in any JavaScript VM. We support Node.JS v0.10 and higher.
See documentation:
- About
- Quick Start
- API: usage, methods, signatures and etc
- Input data format: BEMJSON
- Templates syntax
- Templates context
- Runtime: processes for selecting and applying templates
Online demo allows you to share code snippets, change versions and etc. Happy templating!
To compile bem-xjst, you need Node.js v0.10 or later, and npm.
npm install bem-xjstCopy-paste example from quick start or see simple example from repository. Then read documentation and start experimenting with bem-xjst.
Yes. A lot of projects in Yandex and Alfa-Bank, also in opensource projects based on bem-core and bem-components.
See readme.
See readme.
See readme.
- Documentation
- Changelog and releases notes
- Contributing guide
- Online demo (you can share code snippets)
- Twitter account: @bemxjst
- Migration guides for all major versions
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent