clojurescript - 在 clojurescript/试剂/reagi 中跟踪鼠标？

Question

我正在尝试通过一个简单的绘图程序来掌握 clojurescript 中的试剂。

我正在寻找一个示例，说明如何使用 Reagi 以有原则的“FRP”风格访问鼠标位置。 .

在各种试剂示例中，我可以看到如下所示的内容:

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

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

为了做出 Reagi “行为”，我想写这样的东西:

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

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

其次，当我使用试剂时，我希望这些 DOM 节点能够定期重新创建。大概我还需要继续将事件处理程序重新绑定(bind)到 Reagi 流。我如何确保这一点？

干杯

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 取消引用事件流。 .您不必担心必须重新绑定(bind)到事件流，因为它包含对它的引用。

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

如果您正在创建绘图应用程序，我想您的状态/原子将存储在其他地方，而您 swap!或 reset!导致渲染发生。

另外，请注意，行为和事件都只包含对最新值的引用，这对于绘图应用程序可能并不理想。还有雷吉的 buffer 这可能会有所帮助。