1

I'm new to clojurescript and I got a task of creating a filter with toggling list items requirement on click of a plus icon. I have written css to hide when the class is inactive and show when it's active. I just want to know the correct syntax how to toggle the class on click using clojurescript or om-next.

Or is there any way to toggle (empty / fill) the list array on click of sibling / other element (h3).

I have tried something like this.

[:h3 (:name aggregation) {:on-click #(swap! :className "dInline" "dNone")}]

This is the actual code.

(defn render-aggregation
    [{navigation-dimension :field :as aggregation} toggle-expanded rendered-filters]
        (let [show-expanded? (> (count (:values aggregation)) 8)]
            [:li {:key (str "k-" navigation-dimension)}
                 [:h3 (:name aggregation)]
                     (cond-> (into [:ul.list-unstyled] rendered-filters)
                         show-expanded?
                         (conj [:li
                             [:button.btn.btn-default.btn-xs {:on-click (toggle-expanded aggregation)}
                                 (if (:ui/expanded? aggregation) "show fewer" "show more")]]))]))

Actual result is h3 element should change it's class to "dNone" on click

Mohan Saginala
  • 13
  • 4
  • You have to set a field in the om.next state and deref that to retrieve the className (so that om.next knows to rerender). `(swap! :className "dInline" "dNone")` does not work, since `swap!` works on an `atom`, not a keyword. Are you allowed to use [Reagent](http://reagent-project.github.io/)? I find that frontend framework easier to understand than om.next or Fulcro and can give you an example then. – user2609980 Aug 27 '19 at 06:52
  • Not using reagent. Can you reply with a simple code and explain briefly how to set field? On click, I have to change/toggle classname of sibling element. Currently trying to change class for the same element first. – Mohan Saginala Aug 27 '19 at 07:19
  • You have to get some atom or other mutable reference (om.next state?) and then `swap!` that. `(swap! your-atom-with-state-of-the-className "dInline" "dNone")`, and then in the app you can deref that `[:h3 (:name aggregation)] {:className @your-atom-with-state-of-the-className}`. om.next should know how to rerender then. But I don't know enough about om.next how this exactly works, and I cannot get it from the documentation quickly. Maybe you can ask in #om channel in clojurians.slack.org as well? – user2609980 Aug 27 '19 at 09:20

1 Answers1

0

I can think of two solutions tapping into vanilla JS:

  1. You may find this answer helpful. It requires the element (your h3) to have an ID though.
  2. If you cannot hav an ID you may want to make use of JavaScript's this keyword, which apparently is accessible from ClojureScript (see here)

I have successfully used method #1 in some of my exercise code, but I'm pretty new to ClojureScript and Web Development in general… please handle my answer with care.

Cheers

Oliver

Phylax
  • 189
  • 10