在clojurescript /試劑/ reagi中跟蹤鼠標？

Question

我試圖通過一個簡單的繪圖程序來掌握clojurescript中的試劑。

我正在尋找一個示例，該示例如何說明如何通過Reagi以具有原則性的“ FRP”啟發風格訪問鼠標位置。

在各種試劑示例中，我可以看到如下所示的內容：

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

將處理程序附加到DOM的元素。

為了使Reagi成為“行為”，我想寫這樣的東西：

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

但是，如何結合這兩個方法，以便我添加到DOM元素中的處理程序能夠提供Reagi行為？

其次，當我使用試劑時，我期望可以定期重新創建這些DOM節點。 大概我也需要繼續將事件處理程序重新綁定到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取消引用事件流。 您不必擔心必須重新綁定到事件流，因為它保留了對事件流的引用。

但是，請記住，將值推送到Reagi流中不會導致Reagent重新呈現直接引用它的節點。 為此，您將需要某種試劑原子。

如果您要創建繪圖應用程序，我想您的狀態/原子將存儲在其他位置，然后swap! 或reset! 導致渲染發生。

另外，請注意，行為和事件都僅保留對最新值的引用，這對於繪圖應用程序可能不是理想的。 還有Reagi的buffer可能會幫助您。