riot.js routerを使ったメモ帳

1. riotがサポートしているルータといっても、完全に独立した機能として提供されている。

<script src="https://rawgit.com/riot/route/master/dist/route.min.js"></script>

 //ready
 route.start(true);///
 route.base('/guest/apps/note/');///if default the # 

 //usage
 route('/'+this.d.id)/// route(path) //jump to the path
 route(function(id){ console.log(id) })///route(caller) //catch

2. urlはpushStateを使って変更される。但し、第三者から同様のurlで機能させるにはサーバの設定が、なお必要。

3. 全部

<script src="//gnjo.github.io/riot.js"></script>
<script src="https://rawgit.com/riot/route/master/dist/route.min.js"></script>
<app>
 <div f>
  <div l><div a>id:{now.id}</div><div ref="code" contenteditable="plaintext-only" oninput="{input}"></div></div>
  <div r><li each="{d in ds}" onclick="{jump}">{d.id}</li><li onclick="{add}">+</li></div> 
 </div>
</app>

<style>
 [a]{border-bottom:1px solid}
 [f]{display:flex;flex-direction:row}
 [f]{position:fixed;top:0;left:0;width:100vw;height:100vh}
 [f]>*{height:auto;padding:0.5rem;overflow-y:scroll}
 [l]{width:70%}
 [r]{width:30%} 
</style>

let fn={}; fn.rid=()=>{return 'x'+Math.random().toString(36).slice(-8)}
;
riot.tag('app',false,function(opts){
 let self=this,code=null,f=fn.rid,f2=(me)=>{return self.ds.indexOf(me)}
 self.ds=opts.ds;
 self.now=self.ds[0]
 self.one('mount',()=>{code=self.refs.code;code.textContent= self.ds[0].data}) 
 self.input=function(ev){
  let i=f2(self.now); self.now.data=ev.target.textContent;self.ds[i]=self.now
 }
 self.add=()=>{let id=f(); self.ds.push({id:id,data:id}) }
 self.jump=function(){
  self.now=this.d; code.textContent=self.now.data; code.focus();
  route('/'+this.d.id)///
 }
 route((id)=>{  self.update(); })/// 
})
;
route.start(true);///
route.base('/guest/apps/note/');///if comment out,then the default #**** 
let data=[
  {id:'xxxx',data:'xxxx'}
 ,{id:'yyyy',data:'yyyy'}
 ,{id:'zzzz',data:'zzzz'}]
;
riot.mount('app',{ds:data})
;