This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-12-01
Channels
- # adventofcode (1)
- # bangalore-clj (1)
- # beginners (8)
- # boot (47)
- # cider (6)
- # cljsrn (3)
- # clojure (155)
- # clojure-brasil (2)
- # clojure-china (3)
- # clojure-conj (1)
- # clojure-hk (4)
- # clojure-korea (36)
- # clojure-russia (38)
- # clojure-spec (53)
- # clojure-taiwan (1)
- # clojure-uk (14)
- # clojurescript (70)
- # clojurex (9)
- # component (2)
- # cursive (20)
- # datascript (19)
- # datomic (39)
- # defnpodcast (1)
- # events (5)
- # figwheel (2)
- # hoplon (81)
- # incanter (2)
- # jobs (7)
- # juxt (3)
- # klipse (1)
- # leiningen (1)
- # luminus (15)
- # mount (1)
- # off-topic (21)
- # om (5)
- # om-next (2)
- # onyx (19)
- # pedestal (2)
- # proto-repl (1)
- # proton (5)
- # re-frame (19)
- # reagent (4)
- # rethinkdb (2)
- # ring-swagger (6)
- # rum (13)
- # specter (6)
- # untangled (4)
- # yada (1)
I am trying to update a JS object based on atom state and continue to have issues. My prototype looks something like
(defn add-codemirror [dom]
"Mixin CodeMirror component"
{:did-mount
(fn []
(let [editor-dirty? (rum/cursor app-state :editor-dirty?)
cm (js/CodeMirror (u/el dom)
(clj->js
{:autofocus true
:mode "xml"
:matchBrackets true
:autoCloseBrackets true
:lineNumbers true
:lineWrapping true
:extraKeys {"Ctrl-Space" #(register-hints)}}
)
)
doc (.-doc cm)
_ (swap! app-state assoc :doc doc)] ; save doc
cm))
})
(rum/defc load-editor < (add-codemirror "cm")
[]
"CodeMiror component. Never refreshes with React, Populated on #cm tag with add-cm mixin"
[:div
[:div#cm]
])
I want to be able to update the view state of the CodeMirror object based on changes to app-state.@firstclassfunc mixins take state as argument and must return state, not sure if this is the issue in this case but your mixin does not follow this rule
@martinklepsch: fair but not readily the issue?
@firstclassfunc Coudl very well be. You lose all state and that will break your entire component.
Also, you never use editor-dirty?
and the return value cm
goes straight to rum which will be confused
I'd probably just use [:div#cm {:ref hook-codemirror}]
where hook-codemirror
takes a dom element as the only argument (and null in case it unmounts)
See https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute
The component renders fine, i manipulate it through its method calls and can update it through the appropriate class. The editor-dirty? was leaked into the example but is merely triggered from a callback within the CodeMirror object.
So my issue is how to call the JS method (. setValue doc <cursor>) when the app-state changes.
Will try the 'ref' thanks @rauh
@rauh never considered refs for that but it makes perfect sense for some cases, cool!