clojure で Electoron できる descjop をやってみようと思った その4
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 になってるのに動くわけないんだよな…………………。