| BH | |
|---|---|
| Sorts | mallmotor |
| Utvecklaren | BEM Community |
| Skrivet i | JS , PHP (officiella versioner) |
| Operativ system | Programvara för flera plattformar |
| Licens | MIT-licens |
| Hemsida | bem.github.io/bh |
BH ( B EM H TML ) är en kompilator deklarativ mallmotor för JS .
BH låter dig modifiera noderna i DOM-trädet på samma sätt som CSS gör - i en deklarativ form.
Att ha en JS- deklaration :
bh . match ( 'knapp' , funktion ( ctx ) { ctx . tag ( 'knapp' ); }); bh . match ( 'button_legacy' , function ( ctx , json ) { ctx . tag ( 'input' ); ctx . attr ( 'typ' , 'button' ); ctx . attr ( 'värde' , json . content ); }) ; bh . match ( 'button_submit' , function ( ctx , json ) { ctx . tag ( 'input' ); ctx . attr ( 'typ' , 'submit' ); ctx . attr ( 'value' , json . content ); }) ;Eller en liknande deklaration i PHP- syntax :
$bh -> match ( 'button' , function ( $ctx ) { $ctx -> tag ( 'button' ); }); $bh -> match ( 'button_legacy' , function ( $ctx , $json ) { $ctx -> tag ( 'input' ); $ctx -> attr ( 'typ' , 'button' ); $ctx -> attr ( 'värde' , $json -> innehåll ); }); $bh -> match ( 'button_submit' , function ( $ctx , $json ) { $ctx -> tag ( 'input' ); $ctx -> attr ( 'typ' , 'submit' ); $ctx -> attr ( 'värde' , $json -> innehåll ); });Och indata:
[ { "block" : "button" , "content" : "Bara en knapp" }, { "block" : "button" , "mods" : { "submit" : true }, "content" : "Skicka knapp" } , { "block" : "button" , "mods" : { "legacy" : true }, "content" : "Legacy button" }, { "block" : "button" , "mods" : { "legacy " : true , "submit" : true }, "content" : "Gammal stil skicka-knapp" } ]Vi får resultatet:
< button class = "button" > Bara en knapp </ button > < input class = "button button_submit" type = "submit" value = "Skicka knapp" /> < input class = "button button_legacy" type = "button" värde = "Äldre knapp" /> < input class = "button button_legacy button_submit" type = "skicka" värde = "Gammal stil skicka knapp" />De officiella implementeringarna av BH är skrivna i JavaScript och PHP .