ractivejs - Update "progress bar" based on selection in Ractive -

i new ractive.js. trying achieve based on id selection(from combo box),update appropriate progress bar.

in below sample, there 2 progress bars , 4 buttons(+25,+10,-25,-10).user can select progressbar(say "first") , press buttons +25 etc.when user performs action, appropriate progressbar should updated(in case "first" "25").

i have tried not sure how select context based on progressbar selection.in case,both progress bars updated irrespective of have selected in select box. please let me know how can resolve issue , tell me if there way clean code(something ng-repeat etc)

please see code in see full code here....

.progress-bar {  position: relative;  width: 200px;  height: 40px;  border: 1px solid black;  } .progress-bar-fill {  height: inherit;  background-color: orange; }      .progress-bar-fill-red { height: inherit; background-color: red;   } .progress-label { position: relative; top: 3px; left: 5px; color: #000; } input[type=range] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; /* making range slider invisible */ opacity: 0; } 

the trick here keep track of progress bar selected (which you're doing selectedprogress value), , use determine value update.

another trick: time find writing same (or similar) code again , again, it's usually sign can abstract function or loop (the so-called don't repeat rule, or dry). in case, can move progress bars repeated section. having done that, makes more sense keep value of progress bar in same object name, { name: 'first', value: 0 }, because then, when we're iterating on progressbar objects, can use {{value}} refer progress bar's value, rather having retrieve value somewhere else.

by same token can avoid re-writing logic updates value, having single function (let's call adjust) , calling directly template:

var ractive = new ractive({   el: document.body,   template: '#template',   data: {     progressbars: [       // notice no `id` field – in <select>, can       // use current index       { name: 'first', value: 0 },       { name: 'second', value: 0 }        // , on...     ],     amounts: [ +25, +10, -10, -25 ]   },   adjust: function ( d ) {     var selected = this.get( 'selectedprogress' );     if ( selected == null ) return;      var keypath = 'progressbars[' + selected + '].value';     this.add( keypath, d );   } }); 

{{#each amounts}}   <button disabled='{{selectedprogress == null}}' on-click='adjust(this)'>{{this > 0 ? '+' : ''}}{{this}}</button> {{/each}} 

now, whenever button (which disabled if haven't selected progress bar) clicked, adjust function called current amount in amounts array (i.e. this).

all of easier show describe, here's updated fiddle: http://jsfiddle.net/rich_harris/k8vpcv27/