gistfile1.clj

(ns no-rerender.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(enable-console-print!)

(def app-state (atom [{:group "A" :text "An item of group A" :color "steelblue"}
                      {:group "B" :text "An item of group B" :color "steelblue"}]))

(def switch-color {"steelblue" "green"
                   "green" "steelblue"})

(defn item-view [item owner]
  (reify
    om/IDisplayName (display-name [_] "item-view")
    om/IRender
    (render [_]
     (println "Rendered item: " item)
     (dom/div #js {:style #js {:backgroundColor (:color item)}}
              (dom/button #js {:onClick #(om/transact! item :color switch-color)} "Switch Color")
              (:text item) "; Cursor path: " (prn-str (om/path item))))))

(defn app-state-view [items owner]
  (reify
    om/IDisplayName (display-name [_] "app-state-view")
    om/IRender
    (render [_]
     (dom/div nil
              (dom/h2 nil "App State")
              (dom/pre nil (.stringify js/JSON (clj->js items) nil 2))))))

(defn app-view [items owner]
  (reify
    om/IDisplayName (display-name [_] "app-view")
    om/IRender
    (render [_]
     (dom/div nil
              (println "Rendered app-view")
              (dom/button #js {:onClick (fn [_] (om/transact! items (comp vec reverse)))} "Reverse List")
              (om/build item-view (first (filter #(= "A" (:group %)) items)) {:key :group})
              (om/build item-view (first (filter #(= "B" (:group %)) items)) {:key :group})
              (om/build app-state-view items)))))

(om/root
 app-view
 app-state
 {:target (. js/document (getElementById "app"))})