riot.js key list add del

keyはriotが使うだけなので一意であれば何でも良い。

 let f=()=>{return Math.random().toString(36).slice(-8)} //f2it9yrq

配列の変更そのものが内部的にelementの生成になる。

 del=function(ev){ let me=this.user; this.users.splice( this.users.indexOf(me),1) }
 add=function(ev){ this.users.splice(this.users.length,0,def())}

全部

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

<script type="text/plain" name="cheat-sheet">
let data=['a','b','c','d','e'];
//splice NO chain array; return value NO self.
//[].splice(target_number,change_count,target_data)
//data.splice(0,0,'f'); //unshift//f a b c d e //parent.prependTo
//data.splice(data.length,0,'f');//same push// a b c d e f //parent.appendTo
//if(~data.indexOf('c')) data.splice(data.indexOf('c'),1,'f');//replace c->f//a b f d e// element.replace 
//if(~data.indexOf('c')) data.splice(data.indexOf('c'),0,'f');//before push//a b f c d e// prepend siblingsTo
//if(~data.indexOf('c')) data.splice(data.indexOf('c')+1,0,'f');//after push//a b c f d e// siblingsTo
//if(~data.indexOf('c'))
data.splice(data.indexOf('c'),1);//remove me
console.log(data)
</script>

riot.tag(`loop`
,`<ul>
    <li onclick={tadd}>+ topadd</li>
    <li onclick={add}>+ tailadd</li>
    <li each="{ user in users }" key="{ user.id }"  contextmenu={del}>
<label onclick={click}>{ user.show }</label>
<label onclick={tsadd}>[^+]</label><label onclick={sadd}>[+]</label>
</li>
    <li onclick={tcut}>- topcut</li>
    <li onclick={cut}>- tailcut</li>
  </ul>
`
,function (opts){
 let f=()=>{return Math.random().toString(36).slice(-8)}
 ,def=()=>{let id=f(); return {name:'xyz',id:id,show:id} }
 ,ary= this.users = [
  { name: 'Gian', id:f() ,show:'Gian'},
  { name: 'Dan', id:f() ,show:'Dan' },
  { name: 'Teo', id:f() ,show:'Teo' }
 ]
 click=function(ev){ let u=this.user; u.show =(u.show===u.name)?u.id:u.name; }
 del=function(ev){ ev.preventDefault();let me=this.user; ary.splice( ary.indexOf(me),1) }
 tadd=function(ev){ary.splice(0,0,def())}
 add=function(ev){ary.splice(ary.length,0,def())}
 tcut=function(ev){ary.splice(0,1)} 
 cut=function(ev){ary.splice(-1,1)}
 //
 tsadd=function(ev){let me=this.user; ary.splice(ary.indexOf(me),0,def()) }
 sadd=function(ev){let me=this.user; ary.splice(ary.indexOf(me)+1,0,def()) }
})
riot.mount('loop')
;