This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-06-29
Channels
- # admin-announcements (4)
- # arachne (19)
- # aws-lambda (3)
- # beginners (10)
- # boot (166)
- # capetown (32)
- # carry (160)
- # cider (5)
- # cljs-dev (5)
- # cljs-edn (19)
- # cljsrn (1)
- # clojure (100)
- # clojure-belgium (2)
- # clojure-dev (8)
- # clojure-greece (13)
- # clojure-new-zealand (12)
- # clojure-poland (1)
- # clojure-russia (93)
- # clojure-sanfrancisco (2)
- # clojure-spec (133)
- # clojure-uk (52)
- # clojurescript (129)
- # cursive (32)
- # datomic (13)
- # defnpodcast (5)
- # devcards (6)
- # dirac (4)
- # emacs (12)
- # euroclojure (5)
- # events (2)
- # hoplon (19)
- # immutant (45)
- # keechma (17)
- # lein-figwheel (27)
- # off-topic (9)
- # om (30)
- # onyx (17)
- # other-languages (3)
- # planck (2)
- # proton (11)
- # re-frame (7)
- # reagent (4)
- # ring (8)
- # sim-testing (2)
- # spacemacs (4)
- # testing (2)
- # untangled (162)
- # utah-clojurians (1)
- # yada (80)
@danburton: regarding the parameter, you can try to define your component with ui
. Are you using set-query!
for now ?
Hey Folks 🙂 Wondering if anyone may be able to help me out? I've been learning ClojureScript & Om for a couple of days now. I am having a problem in regards to the following code snippet below:
;; Build the todo-input area to enter a todo task and then when
;; a user hits the return key, add the todo to the list area.
(defn todo-input [todos owner]
(om/component
(html
[:input ;; Type input -> text.
{:type "text"
:placeholder "What needs doing?"
:on-key-up (fn [event] ;; Trigger an event handler.
(let [input (.-target event)]
(when (= 13 (.-keyCode event)) ;; When user hits ENTER.
(om/transact! todos ;; Evlautation closure.
(partial add-todo (.-value input))) ;; Take the value of input.
(set! (.-value input) ""))))} ;; After add-todo method has been executed -> reset input.
])))
;; Build the add-todo button to capture the input value and add
;; task to the list of todo items. No return key functionality required.
(defn todo-add-btn [todos owner]
(om/component
(html
[:button {:class "add-btn" ;; Button type with class add-btn.
:on-click (fn [event] ;; Trigger an event and function.
(let [input (.-target event)] ;; Event handler.
(om/transact! todos ;; Begin evaluation closure.
(partial add-todo (.-value input))) ;; Take the value of input.
(set! (.-value input) "")))} "Add task" ;; After adding todo item -> reset input.
])))
Essentially, I am unable to capture the value of input
when the todo-add-btn
submits on-click
? My assumptions are that the input
is a global variable that also needs to be in the scope of the function todo-add-btn
? How would I go about doing this or have I got it wrong?Following from #C03S1L9DN channel.
I haven’t write any om app so I probably not be able to point directly how to solve your issue in om way. But I believe I can explain what’s happening.
First of all, (let [input (.-target event)])
means bind target
of event
to input symbol. You might view input
as a local variable.
Now the reason why todo-input
works but todo-add-btn
doesn’t is because the event fires from todo-input
contains todo text because it’s html input tag. On the other hand, the event fires from todo-add-btn
doesn’t contain anything because it fires from html button.
I’m not sure how to fix this in Om way but if I were to do it with my limited om knowledge. I would have an intermediate state to keep current text of todo-input
. Then whenever, add button is pressed, grab that intermediate state and add it to the todos list
In on-key-up
, you might do something like (om/transact! :editing-text ….
. Then in on-click
, you have to take data stored in editing-text
and do (om/transact! todos … editing-text …)
.
regarding the editing text, you might consider component's local state ? ( Btw, I'm not sure are you guys talking about the same question ? and is it about om.now or om.next )
@nxqd: I’m not quite sure either. I have almost zero knowledge about Om. All I know is that @kino seems to have some misconception from reading his question.
>My assumptions are that the input
is a global variable
@tap Thank you sir! Makes sense… From what you say, it seems like having an intermediate state that stores the input value would be ideal in this scenario…
I am not really looking to go much further in the application than deleting todos, adding todos and clearing all todos. It’s more of an educational play around and for my current dissertation thesis.
@tap When you mention to implement a state like the following: (om/transact! :editing-text …)
does this mean I would need something like (om/transact! :editing-text {:text text :done false})
?
Or would I need to define and add editing-text
to my function add-todo
?
(defn add-todo [text todos]
(conj todos {:text text :done false}))
Sorry to be a pain 😞no not really, I'm not familiar with om.now so I couldn't help you. There would be more people later today, they will help you for sure.
@nxqd: Thank you 🙂 Will see what other peoples thoughts are… I will also dig around and research some more.
@kino: I don’t think you should modify your add-todo
function as its purpose is to add a todo to the todo list. I believe you want something similar to add-todo
but a different one. But please wait for other people to jump in, I don’t want to lead you to the wrong path. I intentionally left that unclear because I’m not familiar with them either.
@anmonteiro: I had to add a defmethod for compassus/read [nil :db/id] because I have mutations that modify references which get read from the top level (compassus throws an exception if I do not have this). Is it expected to have to add methods for compassus/read when giving additional read keys to transactions? (i.e. (om/transact! this '[(entity/update {}) :other-key-to-read])
)
Does anyone have opinions on terminology between these cases: - A component that uses component local state, but has no query - A component that has a query - A component (say D3) that manages other hidden state and is therefore "stateful" I'm leaning towards: "stateful component" - A component that has component-local state (explicit via initLocalState but also including data that is hidden in places like the DOM by things like D3) "stateless component" - A component without state (opposite of stateful). May or may not have an Om query. "?????" - A component that has an Om query
"Queried component", "Data-driven component", "Component w/Query", "Om component", other suggestions?
perhaps I should just say "component means a component with a query unless otherwise specified"
@tony.kay: you could probably say that components without queries are just plain React components
And components with queries are "Om Next components"
That's probably simple enough
@cmcfarlen: I didn't anticipate that, no. Could you put together a simple example?
@anmonteiro: Sure, I'll put one together tonight.
@dnolen: I made a PR to fix an issue I had with om/process-roots
and recursive queries a while back. Is there anything I need to do to have it considered for acceptance?
Thanks!
@cmcfarlen: did you send me a CA?