Table and Layout Tutorial, Part 1: The Goal
Clone this wiki locally
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 to Brian Marick, please.)
Critter4Us is a webapp used to reserve animals for labs and demonstrations at the University of Illinois College of Veterinary Medicine. I've decided to rewrite it in Clojure. I'm using Noir 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:
<form action="/herd_changes" method="post" id="animal_addition_form"> <table> <tr class="per_animal_row"> <td> <input type="text" class="true_name" name="true_name"/> </td> <td> <select class="species" name="species"> <option selected="selected">Bovine</option> <option>Equine</option> </select> </td> <td> <input type="text" class="extra_display_info" name="extra_display_info"/> </td> </tr> <tr> <td colspan="3" style="text-align: center"> <input type="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:
The form we'll generate goes in place of the
<!--body-->, and a few lines of jQuery code are added within the