使用 Jayq 將 Resize 事件綁定到 Clojurescript

Question

我正在嘗試創建一個簡單的 clojurescript，它將顯示瀏覽器 window 的寬度。

我的 app.cljs 如下所示：

(ns acme.frontend.app
(:use [jayq.core :only [$]])
(:require-macros [hiccups.core :as hiccups :refer [html]])
(:require [hiccups.runtime :as hiccupsrt]))

(def $body ($ :body))

(def window-width (atom nil))

(defn on_window_resize
  []
  (reset! window-width (.-innerWidth ($ :window)))
  (println window-width))


(defn init []
  (set! (.-onload ($ :document))
    ((fn []
       (set! (. ($ :window) -resize) (())))))
  (let [$dyncontent ($ :#svgcontent)]
    (.html $dyncontent @window-width))
  (println "ScriptLoaded"))

我的 Shadow-cljs.edn 如下所示：

{:source-paths
 ["src/dev"
  "src/main"
  "src/test"]

 :dependencies [[cider/cider-nrepl "0.25.10"]
            [jayq "2.5.4"]
            [hiccups "0.3.0"]]
 :builds
 {:frontend
   {:target :browser
    :modules {:main {:init-fn acme.frontend.app/init}}
    :devtools {:http-root "public"
          :http-port 8081}
    :optimizations :advanced
    :externs ["externs/jquery.js"]}}}

代碼編譯，我在 public/js 文件夾中看到 main.js。

然而，這無濟於事。 我可以調整 window 的大小，只要我喜歡什么都不會發生。

我對 clojure/script 很陌生，所以我可能會做一些愚蠢的事情。 但是我做錯了什么？

作為旁注，有沒有辦法在我們當前托管的同一個 index.html 文件上運行 browser-repl？ 當我運行shadow-cljs browser-repl時，一個新的 window 打開托管在不同的端口。 它們如何相同，以便開發在同一頁面上？

更新我已經稍微更新了我的代碼。 現在 init & onDOMLoad 函數如下所示：

(defn onDOMLoad
 []
 (.resize ($ :window) on_window_resize))

(defn init []
 (.ready ($ :document) onDOMLoad))

調整大小時，這無濟於事。

但是js版本可以，如下圖：

(defn onDOMLoad
 []
 (.addEventListener js/window "resize" on_window_resize))

由此我假設 jayq 不允許您綁定以調整事件大小。 我在吠叫錯誤的樹嗎？

更新：我現在已經放棄在 clojurescript 上使用 jayq。 相反，我發現 goog.dom 更加用戶友好。 我正在關注學習 clojurescript 的書以獲取這方面的指導。 我正在相應地結束這個問題。 非常感謝。

Answer 1

在您的(defn init []...)中，您正在創建一個匿名 function ，然后通過額外的括號立即調用它((fn []...)) 。 所以 function 調用的結果就是你set! 作為onload而不是 function 本身。 只需刪除一對括號。

在您的配置中，您將:optimizations和:externs設置為錯誤的級別。 它們需要在:compiler-options鍵下。 您根本不需要設置:optimizations ，它們默認為:advanced用於瀏覽器release版本。

browser-repl啟動獨立於任何構建的獨立瀏覽器 REPL。 如果您想在構建中使用 REPL，請使用shadow-cljs cljs-repl frontend 。