Edited at

riot.js click demo

More than 1 year has passed since last update.


riot.tag(...)は~将来的にサポートされないらしいが、誤訳~一部機能制限があるが、short coding用として便利。

<script src="//gnjo.github.io/riot.js"></script>

<h1>Acme community</h1>
<test></test>

riot.tag(

'test'
,`<h3 class={cls} onclick={click}>{message}</h3>`
,`.red{color:red}`
, function(opts){
message='helloxyz'
click=function(ev){ cls='red' }
})
;
riot.mount('*');//finally one


clickするごとにカラーを変更

<script src="//gnjo.github.io/riot.js"></script>

<script src="//gnjo.github.io/colorNames.js"></script>
<h1>Acme community</h1>
<test></test>


riot.tag(
'test'
,`<link gvar={gvar}><h3 onclick={click} style="color:{c};cursor:pointer">{message}</h3>`
, function(opts){
gvar={num:0,cArray:opts.cArray}
message='click me'
console.log(this);
//style need "" //http://riotjs.com/api/#manual-construction
click=function(ev){
c='#'+gvar.cArray[gvar.num++].hex
}
});

//finally one;
window.cArray=Object.keys(window.colorNames).map((d)=>{return{name:d,hex:window.colorNames[d]};});
riot.mount('test',{cArray:window.cArray});