<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>
'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(); });
License: MIT | Credits: MDG | Original Version: ReactiveVar