Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 159 lines (100 sloc) 7.642 kb
79b7782 Tim Caswell Write new article about haml in javascript.
authored
1 Title: Using HAML templates in JavaScript
2 Author: Tim Caswell
7eb0cd9 Tim Caswell Annotate code types in monit article too.
authored
3 Date: Sat Feb 06 2010 23:06:39 GMT-0600 (CST)
564cbe9 Tim Caswell Update the haml article for latest node.
authored
4 Node: v0.1.102
79b7782 Tim Caswell Write new article about haml in javascript.
authored
5
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
6 One of my favorite libraries when I was doing [ruby][] development was the HTML templating language [HAML][]. For those of you who haven't yet been enlightened, it's an alternate syntax for XML that results in a **lot** less code to write the same thing.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
7
dbe7a5d Micheil Smith Fixing typo in HAML article.
miksago authored
8 When I switched to primarily JavaScript, I missed HAML so much I wrote two ports of it. One is called [jquery-haml][]. It's a dom-building library with some really advanced DOM integration tricks. The other is [haml-js][]. It's a text-to-text compiler that translates HAML code to HTML, perfect for node based websites.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
9
564cbe9 Tim Caswell Update the haml article for latest node.
authored
10 **UPDATE** This article was left as is mostly, current development resides in [jade][] and [grain][].
11
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
12 ## Using `haml-js` in a node website ##
79b7782 Tim Caswell Write new article about haml in javascript.
authored
13
a44f399 Fixed some common issues with word form.
Zearin authored
14 Using [haml-js][] is pretty straightforward. First, you install `haml-js` as a library for use in node. The full docs are [here][], but I'll show how I set up my node libraries.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
15
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
16 ### Installing `haml-js` in node ###
79b7782 Tim Caswell Write new article about haml in javascript.
authored
17
564cbe9 Tim Caswell Update the haml article for latest node.
authored
18 There wasn't a standard package manager for node when this was written, but it's not hard to install a package once you've done it a time or two. I like to use git for all GitHub based libraries so that I can update any library by issuing a pull command.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
19
20 tim@TimBook:~$ mkdir Code
21 tim@TimBook:~$ cd Code/
22 tim@TimBook:~/Code$ git clone git://github.com/creationix/haml-js.git
23 Initialized empty Git repository in /Users/tim/Code/haml-js/.git/
24 remote: Counting objects: 311, done.
25 remote: Compressing objects: 100% (278/278), done.
26 remote: Total 311 (delta 161), reused 0 (delta 0)
27 Receiving objects: 100% (311/311), 47.73 KiB, done.
28 Resolving deltas: 100% (161/161), done.
29 tim@TimBook:~$ mkdir ~/.node_libraries
30 tim@TimBook:~$ cd ~/.node_libraries
31 tim@TimBook:~/.node_libraries$ ln -s ~/Code/haml-js/lib/* ./
32
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
33 Basically I made a folder for code clones, another one for node libraries, and linked the two up so node can find the code.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
34
35 ## Checking the install ##
36
564cbe9 Tim Caswell Update the haml article for latest node.
authored
37 To test if it's installed, open a `node` terminal and try to `require` it.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
38
564cbe9 Tim Caswell Update the haml article for latest node.
authored
39 tim@TimBook:~$ node
40 Type '.help' for options.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
41 node> var Haml = require('haml');
42 node> Haml.render('.classy Hello World')
564cbe9 Tim Caswell Update the haml article for latest node.
authored
43 '<div class="classy">Hello World</div>'
79b7782 Tim Caswell Write new article about haml in javascript.
authored
44
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
45 Great, it's working! If this is not working for you, the [node mailing list][] is a really friendly place if you need help getting this setup.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
46
47 ## A simple HAML based site
48
564cbe9 Tim Caswell Update the haml article for latest node.
authored
49 As you saw in the last section, you can test it from a `node` session, but let's make a whole program with partials, loops and conditionals just for fun.
50
51 Note that I'm using blocking I/O for these examples to simplify the examples and focus on the haml. If you were to use this code in the request loop of a running server, be sure you converted it to use the non-blocking versions.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
52
53 ### Layout template
54
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
55 First let's make our layout template, we'll save it as `layout.haml`:
79b7782 Tim Caswell Write new article about haml in javascript.
authored
56
564cbe9 Tim Caswell Update the haml article for latest node.
authored
57 <haml-for-javascript/layout.haml>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
58
59 ### Start of Program
60
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
61 Now we'll write a short node program to render it:
79b7782 Tim Caswell Write new article about haml in javascript.
authored
62
564cbe9 Tim Caswell Update the haml article for latest node.
authored
63 <haml-for-javascript/step1.js>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
64
65 This program will output:
66
67 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
564cbe9 Tim Caswell Update the haml article for latest node.
authored
68 <html lang="en"><head><title>Hello Node</title></head><body><h1>Hello World</h1></body></html>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
69
70 ### Subpage
71
72 Usually you'll want another template for your actual pages and just share the common layout between them. So we'll make an actual page with a little logic in it and save it as `users.haml`.
73
564cbe9 Tim Caswell Update the haml article for latest node.
authored
74 <haml-for-javascript/users.haml>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
75
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
76 There are two branches in this template. If the users list is empty, then a static message will be shown; if not, then each user will be shown as a list item.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
77
78 Here is how we modify the code to use this page:
79
564cbe9 Tim Caswell Update the haml article for latest node.
authored
80 <haml-for-javascript/step2.js>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
81
82 And here is the output:
83
84 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
564cbe9 Tim Caswell Update the haml article for latest node.
authored
85 <html lang="en"><head><title>System Users</title></head><body><h1>Users</h1><ul><li>Tim</li><li>Sally</li><li>George</li><li>James</li></ul></body></html>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
86
87 ### Partials
88
89 Ok, now that we know how to make layout templates by passing the result of one template as a variable to another, let's learn how to do partials. Partials are pieces of templates that are shared between several pages.
90
91 Here is the data we want to render:
92
564cbe9 Tim Caswell Update the haml article for latest node.
authored
93 <haml-for-javascript/data.js>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
94
95 First we'll make a partial to render each link by itself and save it as `link.haml`:
96
564cbe9 Tim Caswell Update the haml article for latest node.
authored
97 <haml-for-javascript/link.haml>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
98
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
99 Then we'll make a page to render the links and save it as `links.haml`:
79b7782 Tim Caswell Write new article about haml in javascript.
authored
100
564cbe9 Tim Caswell Update the haml article for latest node.
authored
101 <haml-for-javascript/links.haml>
102
103 Since partials aren't built into [haml-js][], then we'll have to implement it in our framework. But don't worry, it's not hard. First we want to load and compile the templates. And this time we'll do it right using non-blocking I/O. This code snippet will load the three haml files and compile them. Once all three finish, the next step is called.
104
105 <haml-for-javascript/step3.js#setup>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
106
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
107 Now we can make a render function that knows how to load the saved, compiled templates:
79b7782 Tim Caswell Write new article about haml in javascript.
authored
108
564cbe9 Tim Caswell Update the haml article for latest node.
authored
109 <haml-for-javascript/step3.js#render>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
110
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
111 We're all set to define the `render_page` function referenced in the parallel loading part:
79b7782 Tim Caswell Write new article about haml in javascript.
authored
112
564cbe9 Tim Caswell Update the haml article for latest node.
authored
113 <haml-for-javascript/step3.js#renderpage>
79b7782 Tim Caswell Write new article about haml in javascript.
authored
114
115 ### Source Code
116
564cbe9 Tim Caswell Update the haml article for latest node.
authored
117 You can find the [source code][] of the examples in the panel to the right.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
118
564cbe9 Tim Caswell Update the haml article for latest node.
authored
119 Also, this blog itself is powered by `haml-js`. You can see the [templates here][].
79b7782 Tim Caswell Write new article about haml in javascript.
authored
120
121 ## Using jquery-haml
122
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
123 My other HAML project, [jquery-haml][], is a different beast altogether. Instead of parsing real HAML syntax and generating HTML text, it takes a JSON structure and dom-builds from it. There is nothing stopping you from using the text-to-text `haml-js` in a browser and inserting it into the DOM using `innerHTML`, but you can't get at the nodes as they're created because it's all done behind closed doors by the browser.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
124
125 Here is a simple example of the `jquery-haml` syntax:
126
127 [".profile",
128 [".left.column",
129 ["#date", print_date() ],
130 ["#address", curent_user.address ]
131 ],
132 [".right.column",
133 ["#email", current_user.email ],
134 ["#bio", current_user.bio ]
135 ]
136 ]
137
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
138 There is nothing special here except we've taken the HAML syntax and fit it into proper JSON syntax.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
139
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
140 How about this example:
79b7782 Tim Caswell Write new article about haml in javascript.
authored
141
142 ["%div", {style: "width:260px; margin:15px;", $:{
143 slider: [{value: 60}]
144 }}]
145
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
146 This creates a div element, sets the style on it, and then calls `$.fn.slider` on it! We didn't have to give it a unique id and then search for it later with something like `$("#my_id").slider({value: 60})`, the dom-builder library did it for us right after creating the node.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
147
d5b68be Tim Caswell Fix typos and add code type annotations.
authored
148 A full depth tutorial on this library could go on for pages, but this should be enough to whet your appetite. See the source of the [sample page][] for some more ideas. But since this is more of an easy macro system for programmatically dom-building, then you have full control over every step. I've written entire apps using just nested `jquery-haml` expressions and closures for data storage.
79b7782 Tim Caswell Write new article about haml in javascript.
authored
149
150 [templates here]: http://github.com/creationix/howtonode.org/tree/master/skin/
151 [sample page]: http://static.creationix.com/jquery-haml/examples
152 [node mailing list]: http://groups.google.com/group/nodejs
153 [here]: http://nodejs.org/api.html#_modules
154 [ruby]: http://ruby-lang.org/
155 [HAML]: http://haml-lang.com/
156 [jquery-haml]: http://github.com/creationix/jquery-haml
564cbe9 Tim Caswell Update the haml article for latest node.
authored
157 [haml-js]: http://github.com/creationix/haml-js
158 [jade]: http://jade-lang.com
159 [grain]: http://github.com/creationix/grain
Something went wrong with that request. Please try again.