Help us understand the problem. What is going on with this article?

luminusでomを使う

More than 3 years have passed since last update.

omをウェブアプリに組み込む際の備忘録です。
omを使いたいだけなら、専用のテンプレが簡単ですが、luminusと組み合わせて楽にWebアプリ化したかったので、

1,Luminus+ClojureScriptでプロジェクト作成
2,omライブラリの追加
3,ルーティングの設定
4,テンプレート作成
5,ClojureScriptを書く

という流れになります。

Luminus+ClojureScriptのテンプレプロジェクトを作成

$ lein new luminus omtest +cljs
$ cd omtest/

omライブラリを追加する

  • 現在のluminusでプラグインにデフォルトで入ってくる"lein-ancient"のバージョンが古いせいでエラーになることがあるので、最新バージョンに変更しておく
(defproject
  :dependencies
    [org.omcljs/om "0.8.8"] ;<-追加
  :plugins
    [lein-ancient "0.6.2"] ;<-修正

ルーティングの設定

  • 新しいページ用のtemplateとルーティングパスをhome.cljに追加(ここに追加すべきじゃないけど面倒なのでとりあえずここに書いた)
routes/home.clj
(defn hello-page []
      (layout/render
        "hello.html"))

(defroutes home-routes
  ~
  (GET "/hello" [] (hello-page))
  ~

cljs->jsの自動コンパイルを走らせて、アプリを立ち上げる

$ lein cljsbuild auto
$ lein ring server

テンプレートを作成

デフォルトで作成されている、"home.html"を流用し、修正点は以下だけです。

  • ①jsが書き込む空のdivタグ
  • ②で、対象のclojurescript(src-cljs/helloom/core.cljs)の名前空間を指定
resources/templates/hello.html
<html>
  <head>
      <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>om demo</title>
  </head>
  <body>
    <div id="app"></div> ①
    <!-- scripts and styles -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    {% style "/css/screen.css" %}

    <script src="//code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var context = "{{servlet-context}}";
    </script>
    {% if dev %}
      <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.js"></script>
      {% script "/js/out/goog/base.js" %}
      {% script "/js/app.js" %}
      <script type="text/javascript">goog.require("helloom.core");</script> ②
    {% else %}
      <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.min.js"></script>
      {% script "/js/app.js" %}
    {% endif %}
  </body>
</html>

ClojureScriptを書く

公式チュートリアルの通りにhelloworldしてるだけです。

src-cljs/helloom/core.cljs
(ns helloom.core
  (:require [reagent.core :as reagent :refer [atom]]
            [secretary.core :as secretary]
            [reagent-forms.core :refer [bind-fields]]
            [ajax.core :refer [POST]]
            [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true])
  (:require-macros [secretary.core :refer [defroute]]))

(def app-state (atom {:text "Hello OM!!"}))

(om/root
 (fn [app owner]
   (reify om/IRender
     (render [_]
       (dom/h1 nil (:text app)))))
 app-state
 {:target (. js/document (getElementById "app"))})

htmlとcljsを編集すると、それぞれ自動で読み込まれるので、ブラウザで、"アドレス/hello"にアクセスすると、app-stateに定義した"Hello OM!!"が動的に表示されるはずです。
あとは好きなだけClojurescriptを書けばよろし。
以上です。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away