I want to add a on-click handler for each item in my list.
(defonce selected-department (atom "department!"))
(defn sidebar []
[:div#sidebar-wrapper
[:ul.sidebar-nav
[:li.sidebar-brand [:a {:href "#"} "Departments"]]
;;[:li [:a {:on-click (reset! selected-department "test!")} "Dairy"]]
[:li [:a {:href "#"} "Dairy"]]
[:li [:a {:href "#"} "Deli"]]
[:li [:a {:href "#"} "Grocery"]]]])
Then selected-department is a label which I want to show/use the data
(defn response-box []
[:div#form_comparison
[:label#dlabel #selected-department]])
The commented out piece of code doesn't work. Is there a way to make this work?
Your example is not working because you have to pass a function to :on-click like this :
[:li [:a {:on-click #(reset! selected-department "test!")} "Dairy"]]
So the only thing that you need to change is to add # before the (reset! ...
It is the equivalent for
[:li [:a {:on-click (fn [_] (reset! selected-department "test!"))} "Dairy"]]
Edit :
This is the full code that I tested and works fine for me :
(defonce selected-department (atom "department!"))
(defn sidebar []
[:div#sidebar-wrapper
[:ul.sidebar-nav
[:li.sidebar-brand [:a {:href "#"} "Departments"]]
[:li [:a {:on-click #(reset! selected-department "Dairy") :href "#"} "Dairy"]]
[:li [:a {:on-click #(reset! selected-department "Deli") :href "#"} "Deli"]]
[:li [:a {:on-click #(reset! selected-department "Grocery") :href "#"} "Grocery"]]]
[:label #selected-department]])
(reagent/render-component [sidebar] (.getElementById js/document "app"))
The label at the bottom is updated when an item in the list is clicked.
Related
First, I'm sorry if my question is something simple or not clear. I'm almost new to Clojure and I need help.
I want to create a function to generate some HTML link for a menu. This is what I have now and it works fin:
(defn test-function [title-id title-name]
[:span {:onclick #(.scrollIntoView (.getElementById js/document title-id))
:style {:color :red} title-name])
[:li (test-function "title-1-id" "title-1-name")]
[:li (test-function "title-2-id" "title-2-name")]
But as I have many li tags, I want to have something like this to send to the function, and the function can generate the links for me, exactly like what the current code do for me. But I didn't find how to do that yet, and have no idea if I should use vector or something else.
[["title-1-id" "title-1-name"] ["title-2-id" "title-2-name"]]
Thank you in advance.
You can use for, then destructure each element into id and name (I just renamed name to li-name to avoid shadowing function name) and wrap whole for in [:ul ... ]:
[:ul
(for [[li-id li-name] [["id1" "Scroll to red"] ["id2" "Scroll to pink"]]]
[:li {:style {:cursor :pointer
:color :red}
:on-click #(.scrollIntoView (.getElementById js/document li-id))}
li-name])]
[:div
[:div [:img#id1 {:src "" :style {:width 600 :height 1000 :background "red"}}]]
[:div [:img#id2 {:src "" :style {:width 600 :height 1000 :background "pink"}}]]
[:div [:img#id3 {:src "" :style {:width 600 :height 1000 :background "yellow"}}]]]
Note that you even don't need Javascript to scroll to target element- [:a ... ] can point to the object on the same page:
[:ul
(for [[li-id li-name] [["id1" "Scroll to red"] ["id2" "Scroll to pink"]]]
[:a {:href (str "#" li-id)
:style {:color :red
:cursor :pointer
:text-decoration :none}}
[:li li-name]])]
[:div
[:div [:img#id1 {:src "" :style {:width 600 :height 1000 :background "red"}}]]
[:div [:img#id2 {:src "" :style {:width 600 :height 1000 :background "pink"}}]]
[:div [:img#id3 {:src "" :style {:width 600 :height 1000 :background "yellow"}}]]]
I'm working with Reagent and CLJS, familiar with React and Clojure, less so CLJS. I'd like to make a simple form, but it's not obvious to me in CLJS.
(defn form []
[:div
[:input {:type "text" :name "first-name" :id "first-name"}]
[:button {:on-click (fn [e] (test-func "hello"))}
"Click me!"]
])
I want to grab the value of that input, and pass it to a function when the button is clicked. How do I get that input's value into my on-click function?
The idiomatic and technically correct way is to avoid keeping any state in DOM and accessing it directly. You shouldn't rely on the input's value. Keep the state as Reagent's atom. Then you can do anything with it.
(def first-name (r/atom ""))
(defn form []
[:div
[:input {:type "text"
:value #first-name
:on-change #(reset! first-name (.-value (.-target %)))
}]
[:button {:on-click #(test-func #first-name)} "Click me!"]])
You can grab the element's value like this: (.-value (.getElementById js/document "first-name"))
(defn form []
[:div
[:input {:type "text" :name "first-name" :id "first-name"}]
[:button {:on-click (fn [e] (test-func (.-value (.getElementById js/document "first-name"))))}
"Click me!"]
])
If there is a better answer out there, please share. :)
I was following the sample code from http://yogthos.github.io/reagent-forms-example.html and was attempting the use the multi-select option for a list.
(defn select-item [item]
(go
(reset! current-selection item)
(let [response (<! (check-for-response))]
(reset! current-response response)
(reset! past-response response))))
;;batch
(defn item-list []
[:div#items-list
[items-list-header]
[:ul.list-group.items {:field :multi-select :id :pick-a-few}
(if (pos? (count #items))
(doall (for [item #items]
^{:key (item "upc")}
[:li.list-group-item [:a {:class (set-item-class item) :on-click #(select-item item) :href "#"}
(item "description")]]))
[:li [:a "No Items For This Department"]])]])
(defn product-component []
[:div
[item-list]
[product-response]
;[bind-fields item-list items]
;[bind-fields item-list product-response]
])
Does anyone know why I am unable to multi-select? The logic in select-item will change, but I can't seem to see the multi-select in the UI
I've been messing around with bind-fields in my product component with no success.
I just started to use Om (a reactjs based library for ClojureScript). I would like to filter a list based on user input. The following works but the solution seems to be to complicated. Is there a better one ?
(ns om-tut.core
(:require-macros [cljs.core.async.macros :refer [go]])
(:require [om.core :as om :include-macros true]
[om.dom :as dom :include-macros true]
[clojure.string :as string]))
(enable-console-print!)
(def app-state (atom {:list ["Lion" "Zebra" "Buffalo" "Antelope"]}))
(defn handle-change [e owner {:keys [text]}]
(om/set-state! owner :data (vec (filter (fn [x] (> (.indexOf x(.. e -target -value)) -1)) (#app_state :list))))
(om/set-state! owner :text (.. e -target -value)))
(defn list-view [app owner]
(reify
om/IInitState
(init-state [_]
{:text nil
:data (:list app)
})
om/IRenderState
(render-state [this state]
(dom/div nil
(apply dom/ul #js {:className "animals"}
(dom/input
#js {:type "text" :ref "animal" :value (:text state)
:onChange #(handle-change % owner state)})
(map (fn [text] (dom/li nil text)) (:data state)))))))
(om/root list-view app-state
{:target (. js/document (getElementById "registry"))})
I think that this is a better solution:
(ns om-tut.core
(:require-macros [cljs.core.async.macros :refer [go]])
(:require [om.core :as om :include-macros true]
[om.dom :as dom :include-macros true]))
(def app-state (atom {:list ["Lion" "Zebra" "Buffalo" "Antelope"]}))
(defn handle-change [e owner {:keys [text]}]
(om/set-state! owner :text (.. e -target -value)))
(defn list-data [alist filter-text]
(filter (fn [x] (if (nil? filter-text) true
(> (.indexOf x filter-text) -1))) alist))
(defn list-view [app owner]
(reify
om/IInitState
(init-state [_]
{:text nil})
om/IRenderState
(render-state [this state]
(dom/div nil
(apply dom/ul #js {:className "animals"}
(dom/input
#js {:type "text" :ref "animal" :value (:text state)
:onChange (fn [event] (handle-change event owner state))})
(map (fn [text] (dom/li nil text)) (list-data (:list app) (:text state))))))))
(om/root list-view app-state
{:target (. js/document (getElementById "animals"))})
I'm relatively new to Clojure and Compojure web development. The first issue that I've noticed in the toy example that I'm building is that of HTML templating. I'd like to have support for something like partials in Rails, or the templating framework that Django uses.
Currently I have:
(defn index-page []
(html5
[:head
[:title "Home | Compojure Docs"]
(include-css "/css/bootstrap.min.css")
(include-css "/css/bootstrap-responsive.min.css")]
[:body
[:div {:class "container-fluid"}
[:div {:class "row-fluid"}
[:div {:class "span2 menu"}]
[:div {:class "span10 content"}
[:h1 "Compojure Docs"]
[:ul
[:li
[:a {:href "/getting-started"} "Getting Started"]]
[:li
[:a {:href "/routes-in-detail"} "Routes in Detail"]]
[:li
[:a {:href "/destructuring-syntax"} "Destructuring Syntax"]]
[:li
[:a {:href "/nesting-routes"} "Nesting Routes"]]
[:li
[:a {:href "/api-documentation"} "API Documentation"]]
[:li
[:a {:href "/paas-platforms"} "PaaS Platforms"]]
[:li
[:a {:href "/example-project"} "Example Project"]]
[:li
[:a {:href "/example-project-on-cloudbees"} "Example Project on CloudBees"]]
[:li
[:a {:href "/interactive-development-with-ring"} "Interactive Development with Ring"]]
[:li
[:a {:href "/emacs-indentation"} "Emacs Indentation"]]
[:li
[:a {:href "/sessions"} "Sessions"]]
[:li
[:a {:href "/common-problems"} "Common Problems"]]]
(include-js "/js/jquery-1.9.1.min.js")
(include-js "/js/bootstrap.min.js")]]]]))
(defn routes-in-detail []
(html5
[:head
[:title "Routes in Detail | Compojure Docs"]
(include-css "/css/style.css")]
[:body
[:h1 "Routes in Detail"]]))
Is there a good way for me not to repeat code? I'd like the stuff in the HEAD tag to be in it's own template file or function, and then be able to include it as I go. For instance, I'd like to include it in the 'routes-in-detail' function. I've looked at Enlive, but I'm not sure how to use that with Hiccup. Any thoughts on best practices here would be appreciated.
You can pull parts of the markup out into separate vars:
(def head
[:head
[:title "Home | Compojure Docs"]
(include-css "/css/bootstrap.min.css")
... ])
(defn routes-in-detail []
(html5
head
[:body
... ]))
If you need your snippet/partial to take parameters, you can make it into a function instead, for example:
(defn head [title]
[:head
[:title title]
(include-css "/css/bootstrap.min.css")
... ])
(defn routes-in-detail []
(html5
(head "Routes in detail")
... ))
Sometimes you'll want your "snippet" to consist of multiple top-level elements rather than a single one. In that case you can wrap them in a list - hiccup will expand it inline:
(defn head-contents [title]
(list [:title title]
(include-css "/css/bootstrap.min.css")
... )))
(defn routes-in-detail []
(html5
[:head (head-contents "Routes in detail")]
[:body ... ]))
Once you realize the fact that hiccup markup is made out of plain clojure data structures, you'll find that manipulating/building it with functions is easy and flexible.
There's a new templating library called clabango which is modelled after the Django templating library, it may be what you're looking after: https://github.com/danlarkin/clabango