Creating HTML with ClojureScript

Question

I am trying to create the following HTML snippet using clojure.browser.dom, but it looks like it works differently than hiccups,

<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 an HTML element? Using

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

does not generate

 <div data-role="controlgroup"> 

Answer 1

Take a look at the box - https://github.com/ibdknox/crate - this is the hiccup port for cljs.

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

Answer 2

Also look at dommy , which is essentially an optimized version of the box (hiccup version for cljs) proposed by murtaza52.

Answer 3

Check out the flurfunk web interface at https://github.com/flurfunk/flurfunk-web . It looks like they created their own ClojureScript library to generate html, and the interface is similar in nature to hiccups.

Here is 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"]]))