clojure で Electoron できる descjop をやってみようと思った その4

clojure Electron descjop

hello-om-based にボタンを付けるとかそういう感じ。
hello-om-based/src_front/hello_om_based_om/core.cljs をいじるらしい。
以下のようになってる:

(ns hello_om_based-om.core
  (:require [om.core         :as om  :include-macros true]
            [om.dom          :as dom :include-macros true]
            [figwheel.client :as fw  :include-macros true]))

(enable-console-print!)

(fw/watch-and-reload
 :websocket-url   "ws://localhost:3449/figwheel-ws"
 :jsload-callback 'mount-root)

(defonce app-state (atom {:message "Hello om world!"}))

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

(defn init! []
  (mount-root))

(init!)

:require の部分をちょっと合わせただけど、それ以外は変更してない。

まあ、それはともかく、このうちの mount-root ってところが画面に出力されるコンポーネントを定義しているところらしい:

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

dom/h1 っていうのが h1 要素を生成するらしい。
で、これを下のように変更する:

(defn mount-root []
  (om/root
   (fn [state owner]
     (reify om/IRender
       (render [_]
         (dom/div nil
                  (dom/h1 nil (:message state))
                  (dom/button #js { :onClick (fn [e]
                                               (js/alert "pressed!"))}
                              "Hello")))))
   app-state
   {:target (. js/document
               (getElementById "app"))}))

dom/h1 を dom/div でくるんで、dom/h1 の下に dom/button を配置した。
見ての通り、 dom/button はボタンらしい。
で、これをクリックすると pressed! というアラートウィンドウが出るようになっている。

というか、Om does not work になってるのに動くわけないんだよな…………………。

参照