ΠΠ°ΠΊΠ΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°Π±ΠΎΡ ENB-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Π΄Π»Ρ ΡΠ±ΠΎΡΠΊΠΈ BEMTREE- ΠΈ BEMHTML-ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Π² ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ , ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΠΠ.
Π’Π΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ° enb-bemxjst
:
ΠΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ ΠΈΡ API ΠΎΠΏΠΈΡΠ°Π½Ρ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ API ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ° enb-bemxjst
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΎΡ BEM-XJST. ΠΠ°ΠΆΠΎΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ enb-bemxjst Π²ΡΠ΅Π³Π΄Π° ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ ΠΌΠ°ΠΆΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠ΅ΠΉ bem-xjst.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΏΠ°ΠΊΠ΅Ρ enb-bemxjst
:
$ npm install --save-dev enb-bemxjst
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΎΡ ΠΏΠ°ΠΊΠ΅ΡΠ° enb
Π²Π΅ΡΡΠΈΠΈ 0.16.0
ΠΈ Π²ΡΡΠ΅.
- ΠΡΡΡΡΡΠΉ ΡΡΠ°ΡΡ
- Π Π°Π±ΠΎΡΠ° Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ
- ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΡΠ°Π±ΠΎΡΡ ΠΏΠ°ΠΊΠ΅ΡΠ°
- ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ: bemtree, bemhtml.
var BemtreeTech = require('enb-bemxjst/techs/bemtree'),
BemhtmlTech = require('enb-bemxjst/techs/bemhtml'),
FileProvideTech = require('enb/techs/file-provider'),
bemTechs = require('enb-bem-techs');
module.exports = function(config) {
config.node('bundle', function(node) {
// ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ FileList
node.addTechs([
[FileProvideTech, { target: '?.bemdecl.js' }],
[bemTechs.levels, { levels: ['blocks'] }],
bemTechs.deps,
bemTechs.files
]);
// Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ BEMTREE-ΡΠ°ΠΉΠ»
node.addTech(BemtreeTech);
node.addTarget('?.bemtree.js');
// Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ BEMHTML-ΡΠ°ΠΉΠ»
node.addTech(BemhtmlTech);
node.addTarget('?.bemhtml.js');
});
};
ΠΠ»Ρ ΡΠ±ΠΎΡΠΊΠΈ HTML ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ bemjson-to-html.
var BemjsonToHtmlTech = require('enb-bemxjst/techs/bemjson-to-html'),
BemhtmlTech = require('enb-bemxjst/techs/bemhtml'),
FileProvideTech = require('enb/techs/file-provider'),
bemTechs = require('enb-bem-techs');
module.exports = function(config) {
config.node('bundle', function(node) {
// ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ BEMJSON-ΡΠ°ΠΉΠ»
node.addTech([FileProvideTech, { target: '?.bemjson.js' }]);
// ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ FileList
node.addTechs([
[bemTechs.levels, { levels: ['blocks'] }],
[bemTechs.bemjsonToBemdecl],
[bemTechs.deps],
[bemTechs.files]
]);
// Π‘ΠΎΠ±ΠΈΡΠ°Π΅ΠΌ BEMHTML-ΡΠ°ΠΉΠ»
node.addTech(BemhtmlTech);
node.addTarget('?.bemhtml.js');
// Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ HTML-ΡΠ°ΠΉΠ»
node.addTech(BemjsonToHtmlTech);
node.addTarget('?.html');
});
};
ΠΠΎ ΠΠΠ-ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ Ρ
ΡΠ°Π½ΡΡΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΡΠ°ΠΉΠ»Π°Ρ
Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ .bemtree.js
ΠΈ .bemhtml.js
Π² Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡΡ
Π±Π»ΠΎΠΊΠΎΠ². Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½Ρ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ±ΡΠ°ΡΡ ΠΈΡ
ΠΈΡΡ
ΠΎΠ΄Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ.
ΠΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Ρ ΡΠ°Π±Π»ΠΎΠ½Π°ΠΌΠΈ (.bemtree.js
ΠΈΠ»ΠΈ .bemhtml.js
) ΡΠΎΠ±ΠΈΡΠ°ΡΡΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΠΎΠ±ΡΠΈΠΉ ΡΠ°ΠΉΠ» (?.bemtree.js
ΠΈΠ»ΠΈ ?.bemhtml.js
) Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ:
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ β ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°ΠΉΠ» ?.bemhtml.js
ΠΈΠ»ΠΈ ?.bemtree.js
β ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½Π°Π»ΠΈΡΠΈΡ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΈ Π΅Π΅ ΡΠΈΠΏΠ° Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
:
Π‘ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°ΠΉΠ» ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠ΄ΡΠ»Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ CommonJS.
var BEMTREE = require('bundle.bemtree.js').BEMTREE, // ΠΡΡΡ Π΄ΠΎ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ BEMTREE-ΡΠ°ΠΉΠ»Π°
BEMHTML = require('bundle.bemhtml.js').BEMHTML; // ΠΡΡΡ Π΄ΠΎ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ BEMHTML-ΡΠ°ΠΉΠ»Π°
var bemjson = BEMTREE.apply({ block: 'page', data: { /* ... */ } }),
html = BEMHTML.apply(bemjson); // <html>...</html>
Π‘ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°ΠΉΠ» ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊ JavaScript-ΡΠ°ΠΉΠ».
<script src="bundle.bemtree.js"></script>
<script src="bundle.bemhtml.js"></script>
Π Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Π·Π°Π²ΠΈΡΡΡ ΠΎΡ Π½Π°Π»ΠΈΡΠΈΡ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ:
-
ΠΠ΅Π· ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ
Π¨Π°Π±Π»ΠΎΠ½Ρ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΈΠ· Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ
BEMTREE
ΠΈΠ»ΠΈBEMHTML
.var bemjson = BEMTREE.apply({ block: 'page', data: { /* ... */ } }), html = BEMHTML.apply(bemjson); // <html>...</html>
-
Π‘ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ YModules
Π¨Π°Π±Π»ΠΎΠ½Ρ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΈΠ· ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ (YModules):
modules.require(['BEMTREE', 'BEMHTML'], function(BEMTREE, BEMHTML) { var bemjson = BEMTREE.apply({ block: 'page', data: { /* ... */ } }), html = BEMHTML.apply(bemjson); // <html>...</html> });
HTML β ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π° ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ BEMJSON-ΡΠ°ΠΉΠ»Ρ.
Π‘Π±ΠΎΡΠΊΠ° HTML (ΡΠ°ΠΉΠ» ?.html
) Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ enb-bemxjst
ΠΏΡΠΎΡ
ΠΎΠ΄ΠΈΡ Π² Π΄Π²Π° ΡΡΠ°ΠΏΠ°:
- Π€Π°ΠΉΠ»
?.bemhtml.js
ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ bemhtml. - BEMJSON ΠΈ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ
?.bemhtml.js-ΡΠ°ΠΉΠ»
ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ bemjson-to-html, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ HTML-ΡΠ°ΠΉΠ» (?.html
).
Π’Π΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ bemtree ΠΈ bemhtml ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΊΠ°ΠΊ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΡ ΡΠΈΡΡΠ΅ΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠΏΡΠΈΠΈ requires.
ΠΠ»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΊΠ°ΠΆΠΈΡΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΉ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ:
- ΠΈΠΌΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ;
- ΠΈΠΌΡ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΈΠ· YModules;
- ΠΏΡΡΡ ΠΊ ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ CommonJS.
{
requires: {
'lib-name': {
globals: 'libName', // ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π² Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ
ym: 'lib-name', // ΠΠΌΡ ΠΌΠΎΠ΄ΡΠ»Ρ ΠΈΠ· YModules
commonJS: 'path/to/lib-name' // ΠΡΡΡ ΠΊ ΠΌΠΎΠ΄ΡΠ»Ρ CommonJS ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π°
}
}
}
Π ΡΠ°Π±Π»ΠΎΠ½Π°Ρ
ΠΌΠΎΠ΄ΡΠ»ΠΈ Π±ΡΠ΄ΡΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° this.require
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
block('button').content()(function () {
var lib = this.require('lib-name');
return lib.hello();
});
ΠΠ΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π²ΡΠ΅ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠΎΠ΄ΡΠ»Ρ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡΡΡ ΠΈΠ· Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π² ΡΡΠ΅Π΄Π΅ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΌΠΎΠ΄ΡΠ»ΡΠ½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ°.
{
requires: {
'lib-name': {
globals: 'dependName' // ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π² Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ
}
}
}
ΠΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ moment
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΡΡ ΠΊ ΠΌΠΎΠ΄ΡΠ»Ρ:
{
requires: {
moment: {
commonJS: 'moment', // ΠΡΡΡ ΠΊ ΠΌΠΎΠ΄ΡΠ»Ρ CommonJS ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π°
}
}
}
Π ΡΠ°Π±Π»ΠΎΠ½Π°Ρ
ΠΌΠΎΠ΄ΡΠ»Ρ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° this.require('moment')
. ΠΠΎΠ΄ ΡΠ°Π±Π»ΠΎΠ½Π° ΠΏΠΈΡΠ΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·, ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΈ Π² Node.js
:
block('post').elem('data').content()(function () {
var moment = this.require('moment'), // ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° `moment`
// ΠΡΠ΅ΠΌΡ Π² ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ
, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΠΎΠ΅ Ρ ΡΠ΅ΡΠ²Π΅ΡΠ°
return moment(ctx.param.date).format('YYYY-MM-DD HH:mm:ss');
});
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° Π΄Π»Ρ BEMHTML-ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ²:
Π‘ ΠΌΠΎΠΌΠ΅Π½ΡΠ° Π²ΡΠΏΡΡΠΊΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ bem-core ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΡΡΠΈΡΠ°Π΅ΡΡΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ.
Π ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π½Π° JS-ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΈΡΠ°ΠΉΡΠ΅ Π² ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΠΎ ΠΌΠΈΠ³ΡΠ°ΡΠΈΠΈ.
ΠΠ°Π·ΠΎΠ²Π°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ BEM-XJST-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π°ΡΠΈΠΎΠ½Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ (i18n).
Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ i18n Π² ΡΠ°Π±Π»ΠΎΠ½Π°Ρ
, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠΎΠ΄ΡΠ»Ρ BEM.I18N
ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ.
BEM.I18N
β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π°ΡΠΈΠΎΠ½Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π±Π»ΠΎΠΊΠΎΠ². Π―Π΄ΡΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²keyset
-ΡΠ°ΠΉΠ»Π°Ρ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π±Π°Π·ΠΎΠ²ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π±Π»ΠΎΠΊΠΎΠ²:
ΠΠΎΡΠ»Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ BEM.I18N
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½Π° Π² ΡΠ°Π±Π»ΠΎΠ½Π°Ρ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° this.require
:
block('button').elem('tooltip').content()(function () {
var i18n = this.require('i18n'), // ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° `BEM.I18N`
// ΠΠΎΠΊΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠ»ΡΡΠ° `tooltip`
return i18n('button', 'tooltip');
});
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Π²ΡΠ²ΠΎΠ΄ ΠΎΡΠΈΠ±ΠΎΠΊ Π² BEMHTML- ΠΈ BEMTREE- ΡΠ°Π±Π»ΠΎΠ½Π°Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΡΡ ΠΊΠΎΠ΄Π° (ΠΎΡΠΈΠ±ΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π΅ Π½Π° ΡΠΎΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠ°ΠΉΠ», Π° Π½Π° ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΡΠ°ΠΉΠ» Ρ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠΌ) Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ enb-bemxjst Π²Π΅ΡΡΠΈΠΈ 8.9.0 ΠΈ Π²ΡΡΠ΅.
Π ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ .enb/make
Π½Π° Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ Ρ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ
bemhtml/bemtree Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π²ΠΊΠ»ΡΡΠ΅Π½Π° ΠΎΠΏΡΠΈΡ sourcemaps: true
. ΠΠ°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ
ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΡΡ ΠΎΠΏΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ, Π½ΠΎ Π½Π΅ Π²
ΠΏΡΠΎΠ΄Π°ΠΊΡΠ΅Π½Π΅.
'use strict';
const techs = {
bemhtml: require('enb-bemxjst/techs/bemhtml'),
...
};
module.exports = function(config) {
config.nodes('pages/all', function(nodeConfig) {
nodeConfig.addTechs([
// bemhtml
[techs.bemhtml, {
target: '?.bemhtml.js',
sourcemap: env === 'development',
engineOptions: {
production: env === 'production',
omitOptionalEndTags: true,
unquotedAttrs: true,
elemJsInstances: true
}
}]
]);
nodeConfig.addTargets(['?.bemhtml.js']);
});
});
- API ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ
- ΠΡΡΡΡΡΠΉ ΡΡΠ°ΡΡ ΠΏΠΎ BEMHTML
- ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°ΡΠΎΡΠ° ΠΈ Π΅Π³ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²
- Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΡΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°ΡΠΎΡΡ BEMHTML
- Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΡΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°ΡΠΎΡΡ BEMTREE
- Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ BEMJSON
- JS-ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
Β© 2013 YANDEX LLC. ΠΠΎΠ΄ Π»ΠΈΡΠ΅Π½Π·ΠΈΡΠΎΠ²Π°Π½ Mozilla Public License 2.0.