Demo

HTML

           <div>
             <a id="increase-btn">Increase Counter</a>
           </div>
           <div>
             <span id="counter-span">Counter: 0</span>
           </div>
           <div>
             <a id="decrease-btn">Decrease Counter</a>
           </div>
         

JS

           'use strict';

           var StdReactiveVar = require('reactive-var-std');

           var Tracker = StdReactiveVar.Tracker;
           var StdReactiveVar = StdReactiveVar.default;


           // create a create source
           var reactive = new StdReactiveVar(0);

          // increase the counter
           document.getElementById('increase-btn').addEventListener('click', function() {
             var count = reactive.getNonReactive();
             reactive.set(count + 1);
           });

           // decrease the counter
           document.getElementById('decrease-btn').addEventListener('click', function() {
             var count = reactive.getNonReactive();
             reactive.set(count - 1);
           });

           var spanEl = document.getElementById('counter-span');

           // wrap the counter inside Tracker.autorun to watch the counter for changes
           // and update the view if there are changes
           Tracker.autorun(function() {
             spanEl.innerText = 'Counter: ' + reactive.get();
           });