Last active
August 29, 2015 14:12
-
-
Save qfox/45c35ac395dfec326555 to your computer and use it in GitHub Desktop.
elem-inst-test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
block : 'page', | |
title : 'elem-inst-test', | |
styles : [{ elem : 'css', url : 'elem-inst-test.min.css' }], | |
scripts : [{ elem : 'js', url : 'elem-inst-test.min.js' }], | |
content : [ | |
{ | |
block : 'elem-inst-test', | |
js : true, | |
mods : { mod : true }, | |
content : [ | |
{ | |
elem : 'elem1', | |
content : [ | |
{ | |
block : 'input', | |
mix : { block : 'elem-inst-test', elem : 'elem2', mods : { type : 'input' } } | |
} | |
] | |
} | |
] | |
} | |
] | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// block | |
modules.define('elem-inst-test', ['i-bem__dom', 'objects'], function(provide, BEMDOM, objects) { | |
provide(BEMDOM.decl(this.name, { | |
onSetMod : { | |
'js' : { | |
'inited' : function() { | |
console.log('@root _js_inited, self.getName(): ', this.__self.getName()); | |
console.log('@root elem1.value', this.elemInstance('elem1').value); | |
console.log('@root elem2.value', this.elemInstance('elem2').value); | |
console.log('@root .value', this.value); | |
} | |
} | |
} | |
})); | |
}); | |
// block__elem1 | |
modules.define('elem-inst-test', function(provide, Block) { | |
provide(Block.decl({ block : this.name, elem : 'elem1' }, { | |
onSetMod : { | |
'js' : { | |
'inited' : function() { | |
console.log('@__elem1 _js_inited, self.getName(): ', this.__self.getName()); | |
console.log('@__elem1 .block().value: ', this.block().value); | |
console.log('@__elem1 .value: ', this.value); | |
} | |
} | |
}, | |
value : '!!!!!!! it\'s elem1!' | |
})); | |
}); | |
// block__elem2 | |
modules.define('elem-inst-test', function(provide, Block) { | |
provide(Block.decl({ block : this.name, elem : 'elem2' }, { | |
onSetMod : { | |
'js' : { | |
'inited' : function() { | |
console.log('@__elem2 _js_inited, self.getName(): ', this.__self.getName()); | |
console.log('@__elem2 .block().value: ', this.block().value); | |
console.log('@__elem2 .value: ', this.value); | |
} | |
} | |
} | |
})); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
mustDeps : { | |
block : 'i-bem', | |
elems : [{ name : 'dom', mods : ['elem-instances'] }] | |
}, | |
shouldDeps : [ | |
'objects' | |
] | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log: | |
@root _js_inited, self.getName(): elem-inst-test | |
@__elem1 _js_inited, self.getName(): elem-inst-test__elem1 | |
@__elem1 .block().value: undefined | |
@__elem1 .value: !!!!!!! it's elem1! | |
@root elem1.value !!!!!!! it's elem1! | |
@__elem2 _js_inited, self.getName(): elem-inst-test__elem2 | |
@__elem2 .block().value: undefined | |
@__elem2 .value: !!!!!!! it's elem1! | |
@root elem2.value !!!!!!! it's elem1! | |
@root .value undefined |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No, you shouldn't. When you declare modifier of block or element, you get the same BEM-entity with additional behavior. When you declare element, you get another BEM-entity. I agree that this moment is unclear. This problem will be solved in bem-core@v3 where all elements are BEM-entities.