LoginSignup
0

More than 5 years have passed since last update.

riot.js tag間の連携

Last updated at Posted at 2018-04-09

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0