数値入力イベントのstreamと
-1-2-3---4-5-6---7-8-9--
演算子入力イベントのstreamから、
-------+-------+--------
計算に用いるオペランドのstreamを生成して、
---123-----456-----789--
最終的に演算結果のstreamを生成する
---123-----579-----1368-
という流れかなと考えているんですが、実装方法がイマイチつかめていません。
試行錯誤をしてみた結果が以下ですが、結局scanで無理やり実装している感じです。
var ds = $('.digit').asEventStream('click').map(function(d) {
return parseInt(d.target.textContent)
});
var os = $('.operation').asEventStream("click").map('.target.textContent');
var buffer = ds.merge(os).scan({
current: 0,
result: 0,
display: 0,
nextOperation: '+'
}, function(buf, v) {
if (isFinite(v)) {
buf.current = buf.current * 10 + v;
buf.display = buf.current;
} else {
buf.result = eval('buf.result ' + buf.nextOperation + ' buf.current');
buf.result = isFinite(buf.result) ? buf.result : 0;
buf.display = buf.result;
buf.current = 0;
buf.nextOperation = v;
}
return buf;
});
buffer.onValue(console, 'log');
buffer.map('.display').onValue($('#display'), 'text');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<button class="digit">1</button>
<button class="digit">2</button>
<button class="digit">3</button>
<button class="digit">4</button>
<button class="digit">5</button>
<button class="digit">6</button>
<button class="digit">7</button>
<button class="digit">8</button>
<button class="digit">9</button>
<button class="digit">0</button>
<button class="operation">+</button>
<button class="operation">-</button>
<button class="operation">*</button>
<button class="operation">/</button>
</div>
<label id="display"></label>
FRP的には本来どのように実装するのでしょうか?