core.cljs

(ns om-tut.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))
 
(enable-console-print!)
 
(def app-state (atom {:text "Works"}))
 
(defn handle-change
  [e data edit-key owner]
  (om/update! data edit-key (.. e -target -value)))
 
(defn commit-change
  [owner]
  (om/set-state! owner :editing false))
 
(defn editable
  [data owner {:keys [edit-key]}] ;using destructuring.
  (reify
    om/IInitState
    (init-state [_] {:editing false})
    om/IRenderState
    (render-state [_ {:keys [editing]}]
;      (let [text (get data edit-key)]
      (let [text (get data :text)]
        (dom/p nil
          (if editing
            (dom/input
               #js {:value (om/value text)
                    :onChange #(handle-change % data edit-key owner)
                    :onKeyPress #(when (== (.-keyCode %) 13)
                                   (commit-change owner))
                    :onBlur (fn [e] (commit-change owner))})
            (dom/span nil
              (om/value text)
              (dom/button
                #js {:onClick #(om/set-state! owner :editing true)}
                "Edit"))))))))
 
(om/root
  editable
  app-state
  {:target (. js/document (getElementById "app0"))
   :opts {:edit-key :text}})