riot.js tag間の連携

9620 ワード
emit tag連携 riot.js riot.js テキストリンク

callerを登録して解決する。

reactは双方向だが、vueやriotは片方向なので、全体を横通しにするモジュールが必要。

bell.add('xyz',(obj)=>{this.obj=obj; this.update()})
bell.call('xyz',obj);

;(function(root){
var o={bells:{}}
o.add=async function(name,caller){return o.bells[name]=caller}
o.call=async function(name,obj){return (o.bells[name])?o.bells[name](obj):null}
root.bell=o
})(this)
;

全部

<script src="https://gnjo.github.io/riot.js"></script>
<count></count>
<loop></loop>

;(function(root){
var o={bells:{}}
o.add=async function(name,caller){return o.bells[name]=caller}
o.call=async function(name,obj){return (o.bells[name])?o.bells[name](obj):null}
root.bell=o
})(this)
;
riot.tag(`count`
,'<progress max={max} value={value} title={value}></progress>'
,'progress{position:fixed;top:0;left:0;width:50rem}'         
,function(opt){
 let self=this; max=30;value=0;
 //self mean... escape the strong bind
 bell.add('countnew',function(d){ value=d; self.update()})
})
riot.mount('count')
;
riot.tag(`loop`
,`<ul>
<li onclick={click}>+</li>
<li each="{item in items}">{item}</li>
<li onclick={del}>-</li>
</ul>`
,function(opt){
 items=[0]
 click=function(ev){
  items.splice(items.length,0,items.length)
  bell.call('countnew',items.length)
 }
 del=function(ev){
  items.splice(-1,1)
  bell.call('countnew',items.length)
 }
})
riot.mount('loop')
;