如何根据 Bacon 中的一些 EventStream 变化来切换流答案

【问题标题】：How to switch streams based on some EventStream changes in Bacon如何根据 Bacon 中的一些 EventStream 变化来切换流
【发布时间】：2015-02-22 08:06:21
【问题描述】：

考虑http://baconjs.github.io/的这个例子

var up   = $('#up').asEventStream('click');
var down = $('#down').asEventStream('click');

var counter =
  // map up to 1, down to -1
  up.map(1).merge(down.map(-1))
  // accumulate sum
    .scan(0, function(x,y) { return x + y });

// assign observable value to jQuery property text
counter.assign($('#counter'), 'text');

如果我还有一个用于重置计数器的按钮，并且单击此按钮会产生一个事件流，该怎么办。如何根据重置点击流切换计数器流以重置计数器？我知道我必须使用 .flatMapLatest 方法，但是参考这个示例我不知道该怎么做。

【问题讨论】：

标签： javascript reactive-programming bacon.js reactive-streams

【解决方案1】：

假设#reset是一个重置按钮

var up   = $('#up').asEventStream('click');
var down = $('#down').asEventStream('click');
var reset = $('#reset').asEventStream('click');

var counter = reset.flatMapLatest(function () {
    return up.map(1).merge(down.map(-1))
             .scan(0, function(x,y) { return x + y });
});

counter.assign($('#counter'), 'text');

【讨论】：

【解决方案2】：

这里不需要flatMapLatest。您可以使用功能强大且简单得多的Bacon.update，因为在本例中我们有一个简单的状态机。

var up    = $('#up').asEventStream('click');
var down  = $('#down').asEventStream('click');
var reset = $('#reset').asEventStream('click');

var counter = Bacon.update(0,
  [up],    function (prev, unused) { return prev + 1; },
  [down],  function (prev, unused) { return prev - 1; },
  [reset], function (prev, unused) { return 0; }
);

【讨论】：