Skip to content

Instantly share code, notes, and snippets.

@rigdern
Last active August 29, 2015 14:03
Show Gist options
  • Save rigdern/fcef7327aee964d749b6 to your computer and use it in GitHub Desktop.
Save rigdern/fcef7327aee964d749b6 to your computer and use it in GitHub Desktop.
Make it clear that sorting happens in the components and not in the app state
(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))))))
;; Assume you shouldn't do any sorting in your app state. This simulates receiving a
;; state update from the server which causes your vector to be reordered arbitrarily.
(def reorder-list (comp vec reverse))
(defn app-view [items owner]
(reify
om/IDisplayName (display-name [_] "app-view")
om/IRender
(render [_]
(apply dom/div nil
(println "Rendered app-view")
(dom/button #js {:onClick (fn [_] (om/transact! items reorder-list))} "Reorder List")
(om/build-all item-view (sort-by :group items) {:key :group})))))
(om/root
app-view
app-state
{:target (. js/document (getElementById "app"))})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment