Enlive snippet giving me odd HTML

StackOverflow https://stackoverflow.com/questions/21382703

  •  03-10-2022
  •  | 
  •  

Question

Problem: Enlive snippet making funky HTML

Visual reference of problem: http://i.imgur.com/FIOzgZv.png

See bottom of code snippet for strange HTML in question

(ns notebook.handler
  (:require [compojure.core :refer :all]
            [compojure.handler :as handler]
            [compojure.route :as route]
            [net.cgrand.enlive-html :as html]))

(html/defsnippet nav "templates/nav.html" [:*]
      [])

(html/deftemplate home-page "templates/base.html"
  []
   [:body] (html/prepend (nav)))

(defroutes app-routes
  (GET "/" [] (home-page))
  (route/resources "/")
  (route/not-found "Not Found"))

(def app
   (handler/site app-routes))

Contents of base.html:

<html>
  <head>
    <link rel=stylesheet href="css/base.css">
  </head>
  <body>
  </body>
</html>

Contents of nav.html:

<nav>
  <ul>
    <li>FlatNotes</li>
  </ul>
</nav>

HTML when localhost:3000 is visited:

<html>
  <head>
    <link href="css/base.css" rel="stylesheet" />
  </head>
  <body><nav>
  <ul>
    <li>FlatNotes</li>
  </ul>

</nav><ul>
    <li>FlatNotes</li>
  </ul><li>FlatNotes</li>
  </body>

</html>

(reduce str (html/emit* (nav))) shows strange HTML meaning the problem occurs in defsnippet before deftemplate:

"<nav>\n  <ul>\n\t<li>FlatNotes</li>\n  </ul>\n\n</nav><ul>\n\t<li>FlatNotes</li>\n  </ul><li>FlatNotes</li>"

Maybe I'm mistaken about what [:*] does, or there's a fundamental misunderstanding, or there's a gotcha I'm unaware of. I've already reduced the code down to as minimal as I can so lolidk.

Was it helpful?

Solution

:* represents the universal selector. It matches every element in nav.html - nav, ul, and li - which means the nav snippet is:

<nav>
  <ul>
    <li>FlatNotes</li>
  </ul>
</nav>

<ul>
  <li>FlatNotes</li>
</ul>

<li>FlatNotes</li>

The selector you pass to the snippet definition should point to the single, top level element of your snippet. If you change :* to match a single element (i.e. :nav), it ought to give you the snippet you're looking for.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top