Examples using MostJS

most-combine-streams.js

var most = require('most');

var xInput = document.querySelector('input.x');
var yInput = document.querySelector('input.y');
var resultNode = document.querySelector('.result');

var internals = {};
internals.add = function add(x, y) {
    return x + y;
};
internals.toNumber = function toNumber(e) {
    return Number(e.target.value);
};
internals.renderResult = function renderResult(result) {
    resultNode.textContent = result;
};

(function() {
    var x = most.fromEvent('input', xInput).map(internals.toNumber);
    var y = most.fromEvent('input', yInput).map(internals.toNumber);
    most.combine(internals.add, x, y).observe(internals.renderResult);
})();

most-event-delegation.js

var most = require('most');

(function() {
    most.fromEvent('click', document)
        .filter(function filterClicks(evt) {
    	    return evt.target.matches('.listItem');
  	})
  	.flatMapError(function displayErr(err) {
    	    console.log(err, 'from filterClicks');
      	    return most.just(err);
  	})
  	.tap(function(evt) {
            evt.preventDefault();
    	})
  	.observe(function displayOutput(evt) {
      	    document.getElementById('output').textContent = evt.target.id + ' was clicked';
  	});
})();

most-mouse-events.js

var most = require('most');

var internals = {};
internals.mapCoordinates = function mapCoordinates(evt) {
	return evt.clientX + ' | ' + evt.clientY;
};
internals.renderResult = function renderResult(result) {
  document.querySelector('.coordinates').textContent = result;
};
internals.logError = function logError(err) {
	console.log(err, 'from mapCoordinates');
};

(function() {
    most.fromEvent('mousemove', document)
    	.map(internals.mapCoordinates)
    	.flatMapError(internals.logError)
    	.startWith('move the mouse please')
	.observe(internals.renderResult);
})();