Basic HTML templating examples (ported from CL-WHO)

Example #1

(with-html-output *out* 
    (doseq [link title] [["http://zappa.com/" "Frank Zappa"]                                
                         ["http://marcusmiller.com/" "Marcus Miller"]
                         ["http://www.milesdavis.com/" "Miles Davis"]]
        (html [:a {:href link}
                  [:b title]]
                [:br])))

produces:

(with-raw-out *out*
  (template/with-escaping html/esc-html
    (doseq [link title] [["http://zappa.com/" "Frank Zappa"]                                
                         ["http://marcusmiller.com/" "Marcus Miller"]
                         ["http://www.milesdavis.com/" "Miles Davis"]]
      (do 
        (template/write-unesc "<a href=\"") 
        (template/write-unesc (html/esc-attr (clojure/str link))) 
        (template/write-unesc "\"><b>") 
        (template/write-unesc (html/esc-html (clojure/str title))) 
        (template/write-unesc "</b></a><br />")))))

Example #2

(with-html-output *out*
  [:table {:border 0 :cellpadding 4}
    (doseq i (range 0 25 5)
      (html
        [:tr {:align "right"}
          (doseq j (range i (+ i 5))
            (html
              [:td {:bgcolor (if (zero? (rem j 2)) "green" "pink")} (inc j)]))]))])

produces:

(with-raw-out *out*
  (do
    (template/write-unesc "<table border=\"0\" cellpadding=\"4\">") 
    (template/with-escaping html/esc-html 
      (template/write (doseq i (range 0 25 5) 
                        (do 
                          (template/write-unesc "<tr align=\"right\">") 
                          (template/with-escaping html/esc-html 
                            (template/write (doseq j (range i (+ i 5)) 
                                              (do 
                                                (template/write-unesc "<td bgcolor=\"") 
                                                (template/with-escaping html/esc-attr 
                                                  (template/write (if (zero? (rem j 2)) "green" "pink"))) 
                                                (template/write-unesc "\">") 
                                                (template/with-escaping html/esc-html (template/write (inc j))) 
                                                (template/write-unesc "</td>"))))) 
                          (template/write-unesc "</tr>"))))) 
    (template/write-unesc "</table>")))

Javascript HTML templating examples

In the first two examples, the js code is compiled in a constant string.

Example #1

(with-html-output *out* 
  [:script {:type "text/javascript"} 
    (js ((fn [foo] (alert foo)) "hello world!"))])

outputs:

<script type="text/javascript">(function(foo){return alert(foo)})('hello world!');</script>

Example #2 (destructuring)

(with-html-output *out* 
  [:script {:type "text/javascript"} 
    (js ((fn [[foo]] (alert foo)) ["hello world!"]))])

outputs:

<script type="text/javascript">(function(p__45192){return (function(){var vec__45193=p__45192;var foo=vec__45193[0];return alert(foo)})()})(['hello world!']);</script>

Example #3

You can use quote (') for embedding dynamic values:

(with-html-output *out* 
  [:script (js (. ($ '(str "#" (:id item) " a")) click (fn [] 
    (. $ post '(str (:id item) "/") {:state "done"})
    false)))])

produces:

(template/with-raw-out *out* 
  (do
    (template/write-unesc "<script>")
    (template/with-escaping html/esc-html
    (template/write 
      (template/nest 
        (do
          (template/write-unesc "$('#")
          (template/with-escaping js/esc-string 
            (template/write (:id item)))
          (template/write-unesc " a').click((function(){$.post('")
          (template/with-escaping js/esc-string 
            (template/write (:id item))) 
          (template/write-unesc "\\/',{state:'done'});return false}));"))))
    (template/write-unesc "</script>")))

and outputs:

<script>$('#i38f3ba7a592d a').click((function(){$.post('i38f3ba7a592d\/',{state:'done'});return false}));</script>