demo

.enb/techs/bemtreeToHtml.js

@@ -17,10 +17,12 @@
  * ```
  */
 var vm = require('vm'),
+    path = require('path'),
     vow = require('vow'),
     vfs = require('enb/lib/fs/async-fs'),
     asyncRequire = require('enb/lib/fs/async-require'),
-    dropRequireCache = require('enb/lib/fs/drop-require-cache');
+    dropRequireCache = require('enb/lib/fs/drop-require-cache'),
+    dataFilename = path.resolve('data.json');
 
 module.exports = require('enb/lib/build-flow').create()
     .name('html-from-bemtree')
@@ -29,10 +31,11 @@ module.exports = require('enb/lib/build-flow').create()
     .useSourceFilename('bemhtmlTarget', '?.bemhtml.js')
     .builder(function(bemtreeFilename, bemhtmlFilename) {
         dropRequireCache(require, bemhtmlFilename);
+        dropRequireCache(require, dataFilename);
 
         return vow.all([
                 vfs.read(bemtreeFilename, 'utf-8'),
-                asyncRequire(bemhtmlFilename)
+                asyncRequire(bemhtmlFilename),
             ])
             .spread(function(bemtree, bemhtml) {
                 var ctx = vm.createContext({
@@ -46,7 +49,7 @@ module.exports = require('enb/lib/build-flow').create()
                 return [ctx.BEMTREE, bemhtml.BEMHTML];
             })
             .spread(function(BEMTREE, BEMHTML) {
-                return BEMTREE.apply({ block: 'root' })
+                return BEMTREE.apply({ block: 'root', data: require(dataFilename) })
                     .then(function(bemjson) {
                         return BEMHTML.apply(bemjson);
                     });

common.blocks/main/main.bemhtml

@@ -0,0 +1,3 @@
+block('main')(
+    tag()('form')
+);

common.blocks/main/main.bemtree

@@ -0,0 +1,33 @@
+block('main').content()(function() {
+    var cars = this.data.cars,
+        carNames = Object.keys(cars),
+        firstCar = carNames[0],
+        firstCarModels = Object.keys(cars[firstCar]);
+
+    return [
+        {
+            block : 'select',
+            mods : { mode : 'radio', theme : 'islands', size : 'xl' },
+            mix : { block: this.block, elem: 'car' },
+            name : 'car',
+            val : firstCar,
+            options : carNames.map(function(car) {
+                return { val : car, text : car };
+            })
+        },
+        {
+            block : 'select',
+            mods : { mode : 'radio', theme : 'islands', size : 'xl' },
+            mix : { block: this.block, elem: 'model' },
+            name : 'model',
+            val : firstCarModels[0],
+            options : firstCarModels.map(function(model) {
+                return { val : model, text : model };
+            })
+        },
+        {
+            block: 'modal',
+            mods: { theme: 'islands', autoclosable : true }
+        }
+    ];
+});

common.blocks/main/main.css

@@ -0,0 +1,9 @@
+.main
+{
+    padding: 20px;
+}
+
+.main .select
+{
+    margin-right: 12px;
+}

common.blocks/main/main.deps.js

@@ -0,0 +1,23 @@
+[
+    {
+        shouldDeps : [
+            'objects',
+            {
+                block : 'select',
+                mods : { mode : 'radio', theme : 'islands', size : 'xl' }
+            },
+            {
+                block: 'modal',
+                mods: { theme: 'islands', autoclosable : true }
+            }
+        ]
+    },
+    {
+        tech : 'js',
+        shouldDeps : {
+            block : 'select',
+            mods : { mode : 'radio', theme : 'islands', size : 'xl' },
+            tech : 'bemhtml'
+        }
+    }
+]

common.blocks/main/main.js

@@ -0,0 +1,49 @@
+modules.define('main', ['i-bem__dom', 'BEMHTML', 'objects', 'select'], function(provide, BEMDOM, BEMHTML, Objects, Select) {
+
+provide(BEMDOM.decl(this.name, {
+    onSetMod: {
+        js: {
+            inited: function() {
+                var cars = this.params.cars,
+                    modal = this.findBlockInside('modal'),
+                    car = cars[Object.keys(cars)[0]];
+
+                Select.on(this.elem('car'), 'change', function(e) {
+                    var select = e.target,
+                        val = select.getVal();
+
+                    car = cars[val];
+
+                    if (Objects.isEmpty(car)) {
+                        return BEMDOM.update(this.elem('model'), '');
+                    }
+
+                    BEMDOM.update(this.elem('model'), BEMHTML.apply({
+                        block : 'select',
+                        mods : { mode : 'radio', theme : 'islands', size : 'xl' },
+                        mix : { block: this.block, elem: 'model' },
+                        name : 'model',
+                        val : car[0],
+                        options : Object.keys(car).map(function(model) {
+                            return { val : model, text : model };
+                        })
+                    }));
+                }, this);
+
+                Select.on(this.elem('model'), 'change', function(e) {
+                    var model = e.target.getVal(),
+                        colors = car[model].colors;
+
+                    modal
+                        .setContent('<p>Варианты цветов</p>' +
+                            (Object.keys(colors).map(function(color) {
+                                return color + ': ' + colors[color];
+                            }).join('<br>')))
+                        .setMod('visible');
+                }, this);
+            }
+        }
+    }
+}));
+
+});

common.blocks/modal/modal.css

@@ -0,0 +1,4 @@
+.modal__content
+{
+    padding: 12px;
+}

common.blocks/page/page.bemtree

@@ -4,7 +4,8 @@ block('page').content()(function() {
             block: 'header'
         },
         {
-            block: 'main'
+            block: 'main',
+            js: this.data
         },
         {
             block: 'footer'

common.blocks/root/root.bemtree

@@ -1,4 +1,6 @@
 block('root').def()(function() {
+    this.data = this.ctx.data;
+
     return applyCtx({
         block: 'page',
         title: 'TODO',

data.json

@@ -0,0 +1,32 @@
+{
+    "cars" : {
+        "toyota" : {
+            "prius" : {
+                "colors" : {
+                    "c1" : "qwe",
+                    "c2" : "asd"
+                }
+            },
+            "camry" : {
+                "colors" : {
+                    "c1" : "123",
+                    "c2" : "456"
+                }
+            }
+        },
+        "mercedes" : {
+            "benz" : {
+                "colors" : {
+                    "c1" : "black",
+                    "c2" : "red"
+                }
+            },
+            "blah" : {
+                "colors" : {
+                    "c1" : "white",
+                    "c2" : "silver"
+                }
+            }
+        }
+    }
+}