不同 html 上的 Clojurescript OM 定位元素

Question

所以我开始学习 clojurescript，并且正在查看有关它的不同教程。我无法找到的一件事是将元素 ID 定位到某个 html 文件以放置我的标记。

假设我有两个 html 文件，index.html 和 about.html。当 url 指向 http://localhost:3449/about

时，我想将下面的代码定位到 about.html 上的元素 ID "app"

代码：

(om/root
  (fn [data owner]
    (reify
      om/IRender
      (render [_]
        (dom/p nil (:text data)))))
  app-state
  {:target (. js/document (getElementById "app"))})

执行此操作的最佳方法是什么？或者也许是一个参考，所以我可以看看它。或者也许我在这里遗漏了一些要点，也许有人可以启发我。

我也试过用这个https://github.com/gf3/secretary but I'm not sure if it's a better approach since urls must have a hashkey(http://localhost:3449/#/about)来触发。

更新：

所以我使用了下面的答案，它确实有效，但在让它起作用之前我遇到了一些问题。无论如何，有人运行进入了这个 post 并使用了下面的答案，但遇到了一个未定义的问题，请检查我的最终代码。

:cljsbuild 您的 project.clj

部分

:cljsbuild {:builds [{ :id "dev" :source-paths ["src/clj" "src/cljs"] :compiler {:output-to "resources/public/js/main.js" :output-dir "resources/public/js/out/" :optimizations :none :pretty-print true}}]}

在 about.html

上包含 js 文件

<script src="js/out/goog/base.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> <script type="text/javascript">goog.require("om_async.about");</script> <script type="text/javascript">om_async.about.init();</script>

Answer 1

您需要将 javascript 文件添加到要使用它的 html 文件中。因此，如果您有两个不同的 html 文件 index 和 about 您将需要两个不同的 cljs 文件。

两者都会包含一个初始化js的方法，像这样

(defn ^:export init []
  (om/root
    (fn [data owner]
      (reify
        om/IRender
        (render [_]
          (dom/p nil (:text data)))))
    app-state
    {:target (. js/document (getElementById "app"))}))

并且在您的 about.html 文件中，您将这样调用 js：

<script type="text/javascript">your.namespace.about.init();</script>

并且在 index.html:

<script type="text/javascript">your.namespace.index.init();</script>

至少我是这样做的。我很想知道是否有更优雅的方法。

更新：请在底部查看导出功能：https://github.com/sveri/siwf/blob/master/src/cljs/de/sveri/siwf/groups.cljs and here for the html template where the function is used: https://github.com/sveri/siwf/blob/master/resources/templates/groups.html

很难说出你那里出了什么问题，很可能是命名空间问题。
还要确保在调用之前添加已编译的 js 文件：

<script src="/js/app.js"></script>
<script type="text/javascript">your.namespace.index.init();</script>

不同 html 上的 Clojurescript OM 定位元素

Clojurescript OM targeting element on different html

clojure

clojurescript

om