用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);

对于显式状态，我们使用 method

$("#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(“单击”，“..more div”)$(“#my”).asEventStream(“单击”，“.特定-选择器”，函数(事件，args) {返回args }) $(“#my”).asEventStream(“单击”，函数(事件，args) {返回args })

关于它的价值，这里有一个小提琴，它展示了如何在香草JavaScript中这样做：

http://jsfiddle.net/cs01rm3v/