不同 html 上的 Clojurescript OM 目标元素答案

【问题标题】：Clojurescript OM targeting element on different html不同 html 上的 Clojurescript OM 目标元素
【发布时间】：2015-04-24 10:47:14
【问题描述】：

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

假设我有两个 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，但我不确定这是否是更好的方法，因为 URL 必须有一个 hashkey(http://localhost:3449/#/about) 才能触发。

更新：

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

:cljsbuildproject.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>

【问题讨论】：

标签： clojure clojurescript om

【解决方案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 以及使用该功能的 html 模板：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>

【讨论】：