riot.js 子tagの独立性を上げる。
16301 ワード
riotは親子関係を把握することが出来るが、互いのモジュールを知らないほうが独立性が上がり、並行してモジュール開発が出来る。
自分自身にトリガーを引いて(change)、第三者モジュールが変更を検知して参加者全員に知らせる。(changed)
自分自身は参加者は知らないし、誰がchangedしたのかも知らない。ただ、変更されたデータストアが投げられる。
riot.tag('ed','<div ref="code" contenteditable="plaintext-only" oninput="{input}"></div>',function(opts){
let self=this,code=null;
self.on('mount',()=>{code=self.refs.code})
self.on('changed',(d)=>{ if(code.textContent!=d.ed) code.textContent=d.ed })
self.input=()=>{ self.trigger('change',{ed:code.textContent}) }
})
第三者は最近ではデータストアそのものであることが多い。
var sys=new function(){
riot.observable(this);
let self=this,cs=[],share=()=>{ cs.filter(d=>d).map(d=>d.trigger('changed',self.store))}
//cs.filter mean fall the child.
,init =(d)=>{d.on('change',(o)=>{ Object.assign(self.store,o); share() })}
self.store={}
self.on('join',(me)=>{ cs.push(me); init(me); share(); })
}/*usage: sys.trigger('join',me)*/
;
システムに自分自身を知らせる。これによりchange changedをデータストアが管理できる。
sys.trigger('join',riot.mount('res',{})[0])
全部
edとresはお互いを知らないがデータ変更されたことは第三者から通知される。
<script src="//gnjo.github.io/riot.js"></script>
<div><ed></ed></div>
<div><res></res></div>
<style> div{border-bottom:1px solid}</style>
var sys=new function(){
riot.observable(this);
let self=this,cs=[],share=()=>{ cs.filter(d=>d).map(d=>d.trigger('changed',self.store))}
//cs.filter mean fall the child.
,init =(d)=>{d.on('change',(o)=>{ Object.assign(self.store,o); share() })}
self.store={}
self.on('join',(me)=>{ cs.push(me); init(me); share(); })
}/*usage: sys.trigger('join',me)*/
;
riot.tag('ed','<div ref="code" contenteditable="plaintext-only" oninput="{input}"></div>',function(opts){
let self=this,code=null;
self.on('mount',()=>{code=self.refs.code})
self.on('changed',(d)=>{ if(code.textContent!=d.ed) code.textContent=d.ed })
self.input=()=>{ self.trigger('change',{ed:code.textContent}) }
})
sys.trigger('join',riot.mount('ed',{})[0])
;
riot.tag('res','<label>{result}</label>',function(opts){
let self=this;
self.result=0;
self.on('changed',(d)=>{ if(d.ed) self.result = d.ed.length||0; self.update(); })
})
sys.trigger('join',riot.mount('res',{})[0])
;
Author And Source
この問題について(riot.js 子tagの独立性を上げる。), 我々は、より多くの情報をここで見つけました https://qiita.com/HadaGunjyo/items/2add1ef8e32323851b16著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .