使用Bacon.js切換按鈕

Question

所以可以說我有一個按鈕#button 。 我希望它切換某些元素#element可見性。 因此，使用普通的jQuery，我會做

$("#button").on("click", function() {$("#element").toggle();})

或具有明顯的副作用：

var visible = true;
$("#button").on("click", function() {visible = !visible; $("#element").show(visible);})

在Bacon.js中，這相當於什么？ 我認為沒有任何副作用是可能的，但是我不知道怎么做。

編輯：讓我澄清一下：沒有任何不屬於Bacon.js對象的一部分的副作用。

Answer 1

該文檔給出了一個幾乎真實的示例，說明如何使用.assign和$.fn.asEventStream ：

$("#button").asEventStream("click").assign($("#element"), "toggle");

注意事項：對於事件流，您不能使用Property::assign方法，但是onValue工作方式相同。 另外，我們要確保不會將事件作為參數調用toggle ，所以您寧願使用

$("#button").asEventStream("click").onValue($("#element"), "toggle", null, null);

---

對於顯式狀態，我們使用scan方法 ：

$("#button").asEventStream("click") // a stream of click events
.scan(true, // iterate it, starting with true
      function(visible, e) {
     // ignore the event parameter
     return !visible; // just toggle the boolean
}) // now we've got a property of a changing boolean value
.assign($("#element"), "show");

Answer 2

我對此並不完全滿意，但看來Bacon.js依賴jQuery或Zepto才能正常運行。 從GitHub上的API文檔中：

API創建流

$ .asEventStream（eventName）根據jQuery或Zepto.js對象上的事件創建一個EventStream。 您可以傳遞可選參數來添加jQuery活動選擇器和/或處理jQuery事件及其參數的函數（如果給定的話），如下所示：

 $("#my-div").asEventStream("click", ".more-specific-selector") $("#my-div").asEventStream("click", ".more-specific-selector", function(event, args) { return args[0] }) $("#my-div").asEventStream("click", function(event, args) { return args[0] }) 

對於它的價值，這是一個小提琴，它顯示了如何在原始JavaScript中執行此操作：

http://jsfiddle.net/cs01rm3v/