start .
me .
HTML Document File : webapp.htm
<!doctype html><title>database</title><meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/1.3.10/ractive.min.js"></script>
<div id='container'></div>
<script id='template' type='text/ractive'>
{{#persone:posizione}}
<div><button onclick="editor({{posizione}})">#{{posizione}}</button>: {{titolo}} {{cognome}} {{nome}}</div>
{{/persone}}
<select value='{{edit.titolo}}'>
<option value="Sig.">Sig.</option>
<option value="Sig.ra">Sig.ra</option>
<option value="Dott.">Dott.</option>
<option value="Dott.ssa">Dott.ssa</option>
<option value="Spettabile">Spettabile</option>
</select>
<input placeholder="Cognome" value='{{edit.cognome}}'>
<input placeholder="Nome" value='{{edit.nome}}'>
<button onclick="aggiorna()">aggiorna</button><button onclick="nuovo()">nuovo</button>
</script>
<script>
ractive= new Ractive({
el: '#container',
template: '#template',
data: {
persone:[
{nome:'Dario',cognome:'Cangialosi',titolo:'Spettabile'}
],
edit: {nome:'',cognome:'',titolo:''}
},
})
poscor=0
function aggiorna(){
elemento=ractive.get('edit')
lista=ractive.get('persone')
lista[poscor]={...elemento}
ractive.set('persone',lista)
}
function nuovo(){
elemento={nome:'',cognome:'',titolo:''}
lista=ractive.get('persone')
lista.push({...elemento})
ractive.set('persone',lista)
editor(lista.length-1)
}
function editor(posizione){
poscor=posizione
ractive.set('edit',{...ractive.get('persone')[posizione]})
}
editor(ractive.get('persone').length-1)
</script>