在ClojureScript / Reagent / Reagi中跟踪鼠标？

Question

我正在尝试使用一个简单的绘图程序来理解clojurescript中的reagent。

我正在寻找一个使用Reagi以原则性的“FRP”风格访问鼠标位置的示例。

在各种reagent示例中，我可以看到类似于这样的东西：

[:p [:onmousemove (fn (evt) ...)]]

将一个处理程序附加到DOM元素。

为了创建一个Reagi“行为”，我想编写类似于以下内容的代码：

(def mouse-positions (r/behavior ( ... )))

但是，我该如何将这两个组合起来，以便我添加到DOM元素的处理程序可以提供给Reagi行为？

其次，由于我正在使用reagent，我预计这些DOM节点会定期重新创建。我可能需要不断重新绑定事件处理程序到Reagi流中。我该如何确保这一点？

谢谢。

- interstar

Answer 1

我想知道Reagi的事件流是否更合适。大致上是这样的：

(defonce mouse-events (r/events {:x 0 :y 0}))

(defn home-page []
  [:div {:onMouseMove (fn [event]
                        (r/deliver mouse-events {:x (.-clientX event)
                                                 :y (.-clientY event)}))}])

然后，您可以使用@mouse-events取消引用事件流。您不需要担心必须重新绑定到事件流，因为它保持对其的引用。

但是，请记住，将值推入Reagi流不会导致Reagent重新呈现直接引用它的节点。为此，您需要某种Reagent原子。

如果您正在创建绘图应用程序，我想您的状态/原子将存储在其他位置，并且您将使用swap!或reset!来引起渲染。

另外，请注意，行为和事件仅保留对最新值的引用，这可能不适用于绘图应用程序。还有Reagi的buffer，可能会有所帮助。

- Tincman