Clojurescript OM定位元素在不同的html上

问题描述:

所以我开始学习clojurescript,我正在检查它的不同教程。我无法发现的一件事是在某个html文件上定位一个元素id来放置我的标记。Clojurescript OM定位元素在不同的html上

比方说,我有两个html文件,index.html和about.html。我想针对下面的元素ID“应用程序”我的代码上about.html当URL指向http://localhost:3449/about

代码:

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

更新:

所以我用下面的答案和它的工作,但是我做它的工作之前,面临着一些问题。在任何情况下,有人遇到这个帖子,并已使用下面的答案,但得到一个未定义的问题检查我的最终代码。您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}}]}

:cljsbuild部分列入about.html

<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>

您需要将JavaScript文件添加到您想要在使用它的HTML文件JS文件。 因此,如果你有两个不同的html文件索引,你需要两个不同的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> 

和索引.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>