Clojurescript OM 不同 html 上的目标元素

Question

所以我开始学习 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 ) 才能触发。

更新:

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

: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这里是使用该函数的 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>