import { component , view , on } from 'app-decorators' ;
@view ( `
<h3>{{header}}</h3>
<div>{{count}}</div>
<div>
<span class="up"> + </span>
<span class="down"> - </span>
</div>
` )
@component ( )
class Counter {
@view . bind count ;
@on ( 'click .up' ) onClickUp ( ) {
++ this . count
}
@on ( 'click .down' ) onClickUp ( ) {
-- this . count
}
}
< com-counter header ="Counter " count ="1 "> </ com-counter >
create directly with javascript
let counter = Counter.create({
header: 'My Counter',
count: 0,
});
document.body.appendChild(counter);
< com-counter header ="Counter " count ="1 ">
< h3 > My Counter</ h3 >
< div > 0</ div >
< div >
< span class ="up "> + </ span >
< span class ="down "> - </ span >
</ div >
</ com-counter >
import { component , view , on } from 'app-decorators' ;
@view ( `
<h3><slot><slot></h3>
<div>{{count}}</div>
<div>
<span class="up"> + </span>
<span class="down"> - </span>
</div>
` )
@component ( )
class Counter {
@view . bind count ;
@on ( 'click .up' ) onClickUp ( ) {
++ this . count
}
@on ( 'click .down' ) onClickUp ( ) {
-- this . count
}
}
< com-counter count ="0 ">
My Counter
</ com-counter >
< com-counter count ="0 ">
< h3 >
< slot > My Counter</ slot >
</ h3 >
< div > 0</ div >
< div >
< span class ="up "> + </ span >
< span class ="down "> - </ span >
</ div >
</ com-counter >
it also possible nested components for complex structures:
// myparent.js
@component ( {
name : 'my-parent' ,
} )
@view ( `
<div class="a"></div>
<div class="b"></div>
<div class="c">
<span><slot></slot></span>
</div>
` )
class MyParent {
}
//mychild.js
@component ( {
name : 'my-child' ,
} )
@view ( `
<ul>
<li> One </li>
<li> Two </li>
<li>
<slot></slot>
</li>
</ul>
` )
class MySister {
}
// mysister.js
@component ( {
name : 'my-sister' ,
} )
@view ( '<p>sister</p>' )
class MySister {
}
then slot the components together
< my-parent >
< my-child >
< my-sister >
< p > Hello World</ span >
</ my-sister >
</ my-child >
</ my-parent >
< my-parent rendered ="true ">
< div class ="a "> </ div >
< div class ="b "> </ div >
< div class ="c ">
< span >
< slot >
< my-child rendered ="true ">
< ul >
< li > One </ li >
< li > Two </ li >
< li >
< slot >
< my-sister rendered ="true ">
< p > Hello World</ p >
< p > sister</ p >
</ my-sister >
</ slot >
</ li >
</ ul >
</ my-child >
</ slot >
</ span >
</ div >
</ my-parent >