riot.js click demo

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});