使用 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"))

我的影子-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 文件上运行浏览器复制？当我运行 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 [] ...) 中，您正在创建一个匿名函数，然后通过额外的括号 ((fn [] ...)) 立即调用它。因此，该函数调用的结果是 set! 作为 onload 而不是函数本身。只需删除一对括号。

在您的配置中，您将 :optimizations 和 :externs 设置在错误的级别。他们需要在 :compiler-options 键下。不过，您根本不需要设置 :optimizations，对于浏览器 release 版本，它们默认设置为 :advanced。

browser-repl 启动独立于任何构建的独立浏览器 REPL。如果你想在你的构建中使用 REPL，请使用 shadow-cljs cljs-repl frontend.

使用 Jayq 将 Resize 事件绑定到 Clojurescript

Binding Resize event to Clojurescript using Jayq

javascript

events

clojurescript

clojure-java-interop