在clojurescript/试剂/reagi中跟踪鼠标? [英] Tracking mouse in clojurescript / reagent / reagi?

问题描述

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

I'm trying to get to grips with reagent in clojurescript with a simple drawing program.

我正在寻找一个示例，该示例如何使用瑞吉(Reagi).

I'm looking for an example of how to access the mouse position in a principled "FRP" inspired style with Reagi.

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

In various reagent examples I can see things that look like this :

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

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

to attach a handler to an element of the DOM.

要使Reagi成为行为"，我想写这样的东西:

And to make a Reagi "behaviour" I want to write something like this :

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

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

But how do I combine these two so that a handler I add to a DOM element feeds a Reagi behavior?

第二，当我使用试剂时，我期望可以定期重新创建这些DOM节点.大概我也需要继续将事件处理程序重新绑定到Reagi流.我该如何确保?

Secondly, as I'm using reagent, I'm expecting these DOM nodes to be recreated regularly. Presumably I'll need to keep rebinding the event-handler to the Reagi stream too. How do I ensure this?

欢呼

推荐答案

我想知道Reagi的事件流是否更适合.类似于以下内容:

I wonder if Reagi's event stream would be better suited. Something along the lines of:

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

Then, you can deref the event stream with @mouse-events. You shouldn't need to worry about having to rebind to the event stream as it holds the reference to it.

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

However, keep in mind that pushing a value into a Reagi stream will not cause Reagent to re-render a node that references it directly. For that you will need some sort of Reagent atom.

如果您要创建绘图应用程序，我想您的状态/原子将存储在其他位置，并且您 swap！或 reset！将导致渲染发生.

If you're creating a drawing application, I imagine your state/atom will be stored elsewhere, and you swap! or reset! that to cause the render to occur.

此外，请注意，行为和事件都仅保留对最新值的引用，这对于绘图应用程序可能不是理想的选择.还有Reagi的 buffer 这可能会有所帮助.

Also, note that both behaviors and events only hold the reference to the newest value, which may not be ideal for a drawing application. There is also Reagi's buffer that may help with that.

这篇关于在clojurescript/试剂/reagi中跟踪鼠标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！