<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