idea>> bem-xjst>> 返回
项目作者： bem

项目描述 ：
bem-xjst (eXtensible JavaScript Templates): declarative template engine for the browser and server
高级语言： JavaScript
项目地址: git://github.com/bem/bem-xjst.git
创建时间： 2013-05-13T09:22:05Z
项目社区：https://github.com/bem/bem-xjst
开源协议：Other
下载


bem-xjst

Declarative template engine for the browser and server with regular JS syntax.

NPM version
Build Status
Dependency Status
devDependency Status
Coverage Status

Features

Templates are extensible: they can be redefined or extended

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.

  1. block('link')({ tag: 'span' });
  2. // The template sets tag to `span` for all `link` blocks.
  3. // And tag mode can be redefined if any condition passed.
  5. block('link').match((node, ctx) => ctx.url)({ tag: 'a' });
  6. // The template sets tag to `a` only if block `link` have `url` field.
  7. // Otherwise tag will be ‘span’ as previous template says.

Pattern matching

Templates are written using pattern matching for the values and structure of input data

  1. block('list')({ tag: 'ul' });
  2. block('item')({ tag: 'li' });

We can apply these two declarative-style templates templates to data:

  1. {
  2.   block: 'list',
  3.   content: [
  4.     {
  5.       block: 'item',
  6.       content: {
  7.           block: 'list',
  8.           content: [
  9.               { block: 'item', content: 'CSS' },
  10.               { block: 'item', content: 'HTML' }
  11.           ]
  12.       }
  13.     },
  14.     {
  15.       block: 'item',
  16.       content: {
  17.           block: 'list',
  18.           content: { block: 'item', content: 'JS' }
  19.       }
  20.     }
  21.   ] 
  22. }

The result is:

  1. <ul class="list">
  2.     <li class="item">
  3.         <ul class="list">
  4.             <li class="item">CSS</li>
  5.             <li class="item">HTML</li>
  6.         </ul>
  7.     </li>
  8.     <li class="item">
  9.         <ul class="list">
  10.             <li class="item">JS</li>
  11.         </ul>
  12.     </li>
  13. </ul>

As you can see templates are as simple as CSS.

Automatic recursive traversing upon input data

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.

Default rendering

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:

  1. <div class="list">
  2.     <div class="item">
  3.         <div class="list">
  4.             <div class="item">CSS</div>
  5.             <div class="item">HTML</div>
  6.         </div>
  7.     </div>
  8.     <div class="item">
  9.         <div class="list">
  10.             <div class="item">JS</div>
  11.         </div>
  12.     </div>
  13. </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!

No DSL, only JavaScript

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.

Runs on a server and client

You can use bem-xjst in any browser as well as in any JavaScript VM. We support Node.JS v0.10 and higher.

Tell me more

See documentation:

  1. About
  2. Quick Start
  3. API: usage, methods, signatures and etc
  4. Input data format: BEMJSON
  5. Templates syntax
  6. Templates context
  7. Runtime: processes for selecting and applying templates

Try it

Online sandbox

Online demo allows you to share code snippets, change versions and etc. Happy templating!

Install npm package

To compile bem-xjst, you need Node.js v0.10 or later, and npm.

  1. npm install bem-xjst

Copy-paste example from quick start or see simple example from repository. Then read documentation and start experimenting with bem-xjst.

Is bem-xjst used in production?

Yes. A lot of projects in Yandex and Alfa-Bank, also in opensource projects based on bem-core and bem-components.

Benchmarks

See readme.

Runtime linter

See readme.

Static linter and migration tool for templates

See readme.