bemto
bemto copied to clipboard
Scope of elements for block
Hello, is there any way to control the scope of elements?
For example:
mixin block1()
+b.block1&attributes(attributes)
+block2
+e.block1element1
+e.block1element2
render as
.block1
.block2
.block2__block1element1
.block2__block1element2
but I need to get this
.block1
.block2
.block1__block1element1
.block1__block1element2
i.e. skip the scope of mixin block2.
@kizu , hi! Could you help with this, please?
@mikhin как я понял такой возможности нет, так как блоки берутся bemto_objects[bemto_objects.length - 1], для себя нашел подобный выход:
в bemto.pug
//- Block
mixin b(options)
- var settings = get_bemto_settings()
//- TODO: should we make it generic way for other settings too?
if options && options.prefix !== undefined
- settings.prefix = options.prefix
//- Rewriting the class for elements and modifiers
- var tag = options && options.tag || ( typeof options == 'string' ? options : '')
- var isElement = options && options.isElement
- var tagMetadata = options && options.metadata
20: >>>> - var ref = options && options.b <<<<
- var block_sets_context = false
if attributes.class
//- Creating and normalizing bemto classes
- var bemto_classes = attributes.class
if bemto_classes instanceof Array
- bemto_classes = bemto_classes.join(' ')
- bemto_classes = bemto_classes.split(' ')
- var bemto_objects = []
- var is_first_object = true
- var new_context = []
each klass, i in bemto_classes
- var bemto_object = {}
- var prev_object = bemto_objects[bemto_objects.length - 1]
- var sets_context = false
//- Catching the optional tag class
if klass.match(/^[A-Z-]+[A-Z0-9-]?$/)
- tag = klass.toLowerCase()
- continue
//- Use block as a context for the first class if we're at element
if is_first_object && isElement
47: >>>> if ref <<<<
48: >>>> - bemto_object['context'] = [ref] <<<<
else
- bemto_object['context'] = bemto_chain[bemto_chain.length - 1]
при создании элемента указываем ему к какому блоку он относится:
+b.footer
+b.container
+e({b:'footer'}).item
получаем результат
<div class="footer">
<div class="container">
<div class="footer__item"></div>
</div>
</div>