Using multiple event stream values with Bacon.js

Question

I have a form with currently 2 inputs (amount will increase), where users add/edit numbers. After a change in any of the fields, I want to make a calculation with both numbers.

With basic jQuery, it would be a breeze:

var f1 = $(".field-1"), f2 = $(".field-2"), n1, n2, result;
$(".field-1, .field-2").on("keyup", function(){
    n1 = f1.val();
    n2 = f2.val();
    result = n1 / n2;
});

What's the best way to make the same thing with Bacon.js?

What would happen to the `result` then? Why is it a global variable? — Bergi, Jun 24 '14 at 20:33

score 1 · Accepted Answer · answered Jun 24 '14 at 20:47

With Bacon, this is even simpler:

function keyupValueStream(el) {
    return $(el).asEventStream("keyup").map(".target.value");
}
Bacon.combineWith(function(n1, n2) { return n1/n2; },
                  keyupValueStream(".field-1"),
                  keyupValueStream(".field-2")
).onValue(function(result) {
     // …
});

Using multiple event stream values with Bacon.js

1 Answers1