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必须具有哈希键(http://localhost:3449/#/about)才能触发。

更新：

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

在project.clj文件的:cljsbuild部分添加以下内容： :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>

- Robin Carlo Catacutan

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>

- sveri