Last active
August 29, 2015 14:10
-
-
Save mwilc0x/25e126f45a29ee58f313 to your computer and use it in GitHub Desktop.
om ClojureScript ref-cursor error when trying to update vector using om/transact
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(ns cljs-playground.core | |
(:require [om.core :as om :include-macros true] | |
[om.dom :as dom :include-macros true])) | |
(enable-console-print!) | |
(def app-state | |
(atom | |
{:comments-data [{ :author "Commenter 1" :text "comment 1" } | |
{ :author "Commenter 2" :text "comment 2" }]})) | |
(defn comments [] | |
(om/ref-cursor (:comments-data (om/root-cursor app-state)))) | |
(defn Comment | |
[props owner] | |
(reify | |
om/IWillMount | |
(will-mount [_] | |
(println "Comment mounting")) | |
om/IWillUnmount | |
(will-unmount [_] | |
(println "Comment unmounting")) | |
om/IRender | |
(render [_] | |
(println "Comment rendered" props) | |
(dom/div nil | |
(dom/h2 nil (str (:author props)) ": " (str (:text props))))))) | |
(defn CommentList | |
[props owner] | |
(reify | |
om/IWillMount | |
(will-mount [_] | |
(println "Comment List mounting")) | |
om/IWillUnmount | |
(will-unmount [_] | |
(println "Comment List unmounting")) | |
om/IRender | |
(render [_] | |
(println "Comment List rendered") | |
(dom/div nil | |
(apply | |
dom/ul nil | |
(map #(om/build Comment (:comments-data props %)) props)))))) | |
(defn CommentBox | |
[props owner] | |
(reify | |
om/IWillMount | |
(will-mount [_] | |
(println "Comment Box mounting")) | |
om/IWillUnmount | |
(will-unmount [_] | |
(println "Comment Box unmounting")) | |
om/IRender | |
(render [_] | |
(println "Comment Box rendered") | |
(dom/div nil | |
(om/build CommentList props))))) | |
(defn handle-change [e owner {:keys [text]}] | |
(om/set-state! owner :text (.. e -target -value))) | |
(defn handle-submit [e owner {:keys [text]} comments-cursor] | |
(om/transact! comments-cursor #(concat % {:author "foo" :text "bar"})) | |
(om/set-state! owner :text "")) | |
(defn Input | |
[data owner] | |
(reify | |
om/IInitState | |
(init-state [_] | |
{:text nil}) | |
om/IRenderState | |
(render-state [this state] | |
(let [comments-cursor (->> (comments))] | |
(dom/div nil | |
(dom/input #js | |
{ :type "text" | |
:ref "text-field" | |
:value (:text state) | |
:onChange (fn [event] (handle-change event owner state))}) | |
(dom/button | |
#js { :onClick (fn [event] (handle-submit event owner state comments-cursor))} | |
"submit")))))) | |
(defn my-app [global owner] | |
(reify | |
om/IRender | |
(render [_] | |
(println "Root rendered") | |
(dom/div nil | |
(dom/h2 nil "A mini comments app using clojure and react") | |
(om/build CommentBox (:comments-data global)) | |
(om/build Input ((get global :comments-data) this)))))) | |
(om/root my-app app-state | |
{:target (.getElementById js/document "app")}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment