XJT/BEMS concept sample

sample-server-stack.xjt.js

'use strict';
import {Priv as Bempriv, Html as Bemhtml, XJT as xjt} from 'bem-server'

// menu.priv.js - es6priv
Bempriv.decl('menu', class menu extends Bempriv {
  constructor() {
    this.prop('items', this.getItems());
  }
  getItems() {
    // Выдуманная, но близкая к реальности логика маппинга данных
    var items = _.get(this.data, 'templ_data.foobar.yasearchdata.quxbaz.wtfpassages', []);
    // На самом деле кода обычно больше
    // и он может быть сложнее, поэтому лучше его писать в js
    // Элементарный маппинг можно делать без bempriv-стадии сразу в XJT-j2b
    return items.map((item) => ({ text: item.foobar.value, url: item.thumb.img_href }));
  }
});

// xjt json -> bemjson
var j2bTplBundle = [
  // menu.j2b.js
  [{
    block: 'menu',
    content: { mapData: '.items', elem: 'item' }
  },
  {
    block: 'menu', elem: 'item',
    is: {
      block: 'link',
      href: '.url',
      mix: '@', // block: 'menu', elem: 'item'
      content: '.text'
    }
  }],
  
  // page_type_index.j2b.js
  [{
    block: 'page', mods: { type: 'index' },
    content: [
      { elem: 'favicon', data: '.favicon' },
      { mapData: '.meta', elem: 'meta' },
      { elem: 'body', data: '.' }
    ]
  },
  {
    block: 'page', elem: 'body',
    content: [
      { block: 'header', data: '.' },
      {
        block: 'menu',
        data: '.metadata.menu', // priv for menu called implicitly
        mix: { block: 'page', elem: 'menu' }
      },
      { block: 'footer', data: '.' }
    ]
  }]
];

// xjt bemjson -> html
var b2hTplBundle = [
  // menu.b2h.js
  [{
    block: 'menu',
    tag: 'ul'
  },
  {
    block: 'menu', elem: 'item',
    tag: 'li'
  }],

  // link.b2h.js 
  [{
    block: 'link',
    tag: 'a',
    attrs: { href: '.href' }
  }],

  // page_type_index.b2h.js
  [{
    block: 'page', mods: { type: 'index' },
    elems: {
      body: { tag: 'body' },
      header: { tag: 'header' },
      footer: { tag: 'footer' }
    }
  }]
];

export let render = (pageType, jsonData) => {
  let j2bTpl  = xjt.j2b.merge(j2bTplBundle);
  let b2hTpl  = xjt.b2h.merge(b2hTplBundle);
  let bemjson = xjt.j2b(jsonData, j2bTpl, { block: 'page', mods: { type: pageType } }, Bem.Priv.storageApi);
  let html    = xjt.b2h(bemjson, b2hTpl)
  reutrn html;
}