- Notifications
You must be signed in to change notification settings - Fork149
Table and Layout Tutorial, Part 1: The Goal
Part 1: The Goal
Part 2: Resources and Selectors
Part 3: Simple Transformations
Part 4: Duplicating Elements and Nested Transformations
Part 5: Frozen Transformations, Including Snippets and Templates
(Comments toBrian Marick, please.)
Critter4Us is a webapp used to reserve animals for labs and demonstrations at theUniversity of Illinois College of Veterinary Medicine. I've decided to rewrite it in Clojure. I'm usingNoir as the base framework. Because I'm using jQuery, I find Enlive attractive: they both share the metaphor of CSS selectors, and they both want you to keep code separate from the objects it's working on.
I had some trouble. Since I figure what confuses me confuses others, I decided to write yet another Enlive tutorial. This one complements the others out there because it explains from the bottom up rather than from the top down.
Let's begin! Consider this HTML:
<formaction="/herd_changes"method="post"id="animal_addition_form"><table><trclass="per_animal_row"><td><inputtype="text"class="true_name"name="true_name"/></td><td><selectclass="species"name="species"><optionselected="selected">Bovine</option><option>Equine</option></select></td><td><inputtype="text"class="extra_display_info"name="extra_display_info"/></td></tr><tr><tdcolspan="3"style="text-align: center"><inputtype="submit"value="Make the Change"/></td></tr></table></form>
It produces this:
I want it to produce this:
Here, in particular, are the transformations I want to make:
The first table row should be duplicated N times.
Each of the TD entries should have its name rewritten into Rails-style names:
name="animal0[true_name]". Noir translates them into a map of maps.The whole thing needs to be wrapped in this:
<!DOCTYPE html><html><head><title>Critter4Us</title><linkhref="/css/reset.css"rel="stylesheet"type="text/css"><scriptsrc="/js/jquery.js"type="text/javascript"></script><scriptsrc="/js/c4.js"type="text/javascript"></script><scriptid="jquery_code"type="text/javascript"> <!--jquery--></script></head><body><divid="wrapper"><!--body--></div></body></html>
The form we'll generate goes in place of the<!--body-->, and a few lines of jQuery code are added within the<!--jquery-->script tag.