Clojurescript OM targeting element for different html
So, I am starting to learn clojurescript and I am testing it in various tutorials. One thing I haven't been able to figure out is target the element id to a specific html file to fit my markup.
Let's say I have two html files, index.html and about.html. I want to set my code below to "app" id element on about.html when url points to http: // localhost: 3449 / about
code:
(om/root
(fn [data owner]
(reify
om/IRender
(render [_]
(dom/p nil (:text data)))))
app-state
{:target (. js/document (getElementById "app"))})
What would be the best approach to do this? Or maybe a link so I can look at it. Or maybe I missed something here and maybe someone can enlighten me.
Also I tried using this https://github.com/gf3/secretary , but I'm not sure if this is the best approach, since urls must have hashkey ( http: // localhost: 3449 / # / about ) to run.
Update:
So, I used the answer below and it did work, but before getting it to work I ran into some problem. Anyway, someone comes across this post and used the answer below, but got an undefined question to check my final code.
:cljsbuild
your his 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}}]}
included js files on 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>
source to share
You need to add your javascript file to the html file you want to use. So if you have two different html file indexes and you need two different cljs files.
Both of them will contain a js init method like this
(defn ^:export init []
(om/root
(fn [data owner]
(reify
om/IRender
(render [_]
(dom/p nil (:text data)))))
app-state
{:target (. js/document (getElementById "app"))}))
And in your about.html file, you call js like this:
<script type="text/javascript">your.namespace.about.init();</script>
And in index.html:
<script type="text/javascript">your.namespace.index.init();</script>
At least that's how I did it. I would be interested to know if there are more elegant ways to do this.
Update: Please look here at the bottom for the export function: https://github.com/sveri/siwf/blob/master/src/cljs/de/sveri/siwf/groups.cljs and here for the html template that uses this function: https://github.com/sveri/siwf/blob/master/resources/templates/groups.html
It's hard to tell what's going on in your place, most likely it's a namespace issue.
Also don't forget to add the compiled js file before the call:
<script src="/js/app.js"></script>
<script type="text/javascript">your.namespace.index.init();</script>
source to share