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 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）从a上的事件创建一个EventStream   jQuery或Zepto.js对象。您可以传递可选参数来添加   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] })

为了它的价值，这里有一个小提示，展示了如何在vanilla JavaScript中做到这一点：

http://jsfiddle.net/cs01rm3v/

使用Bacon.js切换按钮

2 个答案: