CODEWITHSUNDEEP
clojureclojurescript
Hamza Yerlikaya
Hamza Yerlikaya

Reputation: 49329

Generating HTML with ClojureScript

I am trying to generate the following HTML fragment using clojure.browser.dom, however it looks like it works different than hiccup,

<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>

What is the correct notation for generating HTML element? Using,

[:div {:data-role "controlgroup"} ...]

does not generate,

<div data-role="controlgroup">

Upvotes: 4

Views: 2067

Answers (3)

Adrian Mouat
Adrian Mouat

Reputation: 46480

Also have a look at dommy which is essentially an optimised version of crate (the cljs version of hiccup) that murtaza52 suggested.

Upvotes: 5

murtaza52
murtaza52

Reputation: 47441

Have a look at crate - https://github.com/ibdknox/crate - it is a port of hiccup to cljs.

Also look at enfocus which is an implementation of enlive - https://github.com/cgrand/enlive

Upvotes: 4

Tim Clemons
Tim Clemons

Reputation: 6441

Have a look a flurfunk's web front-end at https://github.com/flurfunk/flurfunk-web. They appear to have rolled their own ClojureScript library to generate html and the interface looks similar in nature to hiccup.

Here's a snippet from https://github.com/flurfunk/flurfunk-web/blob/master/src/cljs/flurfunk/web/core.cljs:

(ns flurfunk.web.core
  (:require [flurfunk.web.dom-helpers :as dom]))
(defn- create-dom []
  (dom/build [:div#content
               [:h1
                 [:a {:href "http://flurfunk.github.com"} title]]
               [:div#messages
                 [:div#message-input
                   [:div
                     [:label "Your name:"]
                     [:input#author-name-input {:type "text"}]]
                   [:textarea#message-textarea]
                   [:button#send-button "Send message"]
                   [:div#waiting-indication]]
                 [:div#hidden-channels
                   [:label "Hidden channels:"]
                   [:ul#hidden-channel-list]]
                 [:div#message-list]]
               [:button#load-more-button "Load more messages"]]))

Upvotes: 1

Related Questions