core.cljs

(ns om-tutorial.core
  (:require [goog.dom :as gdom]
            [om.next :as om :refer-macros [defui]]
            [om.dom :as dom]))

(def app-state (atom {:message "Original message"}))

(defn read [{:keys [state] :as env} key params]
  (let [st @state]
    (if-let [[_ value] (find st key)]
      {:value value}
      {:value :not-found})))

(defn mutate [{:keys [state] :as env} key params]
  (if (= 'reset-message key)
    {:value {:keys [:message]}
     :action #(swap! state assoc :message "New message")}
    {:value :not-found}))

(defui SubComponent
  Object
  (componentWillMount [this]
    (om/set-state! this {:have-clicked-button false}))
  (render [this]
    (let [{:keys [reset-message-fn]} (om/get-computed this)
          {:keys [have-clicked-button]} (om/get-state this)]
      (dom/div nil
        (dom/p nil (str "Have clicked button: " have-clicked-button))
        (dom/button
          #js {:onClick #(do
                           (reset-message-fn)
                           ;; App does not re-render "New message"
                           ;; unless you comment out the next sexp,
                           ;; in which case it will.

                           (om/update-state! this assoc :have-clicked-button true)

                           ;; Is it possible to re-render "New message" *and*
                           ;; update local state when clicking the button?
                           )}
          "Reset message")))))

(def sub-component (om/factory SubComponent))

(defui App
  static om/IQuery
  (query [this]
    [:message])
  Object
  (render [this]
    (let [{:keys [message]} (om/props this)]
      (dom/div nil
        message
        (sub-component
          (om/computed
            {}
            {:reset-message-fn #(om/transact! this '[(reset-message)])}))))))

(def reconciler
  (om/reconciler
    {:state app-state
     :parser (om/parser {:read read :mutate mutate})}))

(om/add-root! reconciler
  App (gdom/getElement "app"))