README.markdown in ice-0.2.2 vs README.markdown in ice-0.2.3

- old
+ new

@@ -1,11 +1,13 @@ # Ice Ice Baby! -The Ice project allows user-created templates to be written in the javascript programming language. They are then interpreted in a sandboxed environment. Ice is similar to Liquid in terms of safety, but uses javascript to leverage the powers of a language most developers are familiar with. +The Ice project allows user-created templates to be written in the javascript programming language. Thanks to the [therubyracer](http://github.com/cowboyd/therubyracer) they are then interpreted using Google's V8 javascript engine. -Ice runs the templates through an erb-ish parser and then uses the [therubyracer](http://github.com/cowboyd/therubyracer) to interpet the javascript using Google's V8 javascript engine. Your users can then write Ice templates like: +Ice is similar to Liquid in terms of safety, but uses javascript to leverage the powers of a language most developers are familiar with. Ice runs the templates through an erb-ish parser (written by [Mark Turansky](http://blog.markturansky.com/BetterJavascriptTemplates.html)). +Your users can then write Ice templates like: + <table> <tr><th>Name</th><th>Email</th></tr> <% for (i = 0; i < users.length; i++) { %> <tr> <td><%= user.name %></td><td><%= mail_to(user.email) %></td> @@ -17,19 +19,21 @@ Ice.convert_template(template_text, vars = {}) ## Why another templating engine when there is Liquid? -Liquid is excellent but has several disadvantages +[Liquid](http://github.com/tobi/liquid) is excellent but it showing its age in a few ways: * Hard to extend without knowing Liquid internals * Introduces yet-another-language, whereas many designers/developers are already familiar with javascript * Doesn't allow template creators to use a rich object model and easily create their own functions * Doesn't have a rich set of support libraries like what javascript brings to the table Note that we're still big fans of Liquid. In fact, we call this project "Ice" as a tribute (extending the metaphor, we use "Cubes" where they have "Drops"). +In addition, our ice_view.rb file is almost directly ripped out of the liquid project. + ## Installation For Rails: config.gem 'ice' @@ -76,9 +80,82 @@ end This generates association helper functions such as comment_ids, num_comments, has_comments, comments, author_id, and author. Note that the results of all associations and revealed functions are also sanitized via to_ice. + +## NavBar + +To make it easier to generate links, we added a NavBar class to the javascript helpers. THis class has an open and close method, as well as a link_to mehod which either takes a url, or a url and a link label. + + <% var nav = new NavBar() %> + <%= nav.open() %> + <%= nav.link_to("Bar", "/foo") %> + <%= nav.link_to("http://ludicast.com") %> + <%= nav.close() %> + +This then generates the following html + + <ul class="linkBar"> + <li><a href="/foo">Bar</a></li> + <li><a href="http://ludicast.com">http://ludicast.com</a></li> + </ul> + +You'll notice that the resulting html code is shorter than the generator code, making this look inefficient. However the NavBar also takes options so if the NavBar above was instantiated with: + + <% var nav = new NavBar({nav_open:"<div>", nav_close:"</div>",link_wrapper:function(link){ + return "<span>" + link + "</span>" + +it would automatically generate + + <div> + <span><a href="/foo">Bar</a></span> + <span><a href="http://ludicast.com">http://ludicast.com</a></span> + </div> + +Also, if you want to make a site- or page-wide change, all you need to do is add these options to the NavBar class like + + NavBar.default_options = {nav_open:"<div>", nav_close:"</div>",link_wrapper:function(link){ + return "<span>" + link + "</span>" + }} + +Then all links will generate with these options, unless overridden in the NavBar's constructor. If the NavBar has a separator property added, it will add that separator between links. If a link is not shown (due to access restrictions or whatever in the link_wrapper function) the separator obviously will not appear for that link. So the code + + bar.separator = "---" + bar.link_wrapper = function (link) { + if (link.match(/aa/)) { + return "" + } else { + return link + } + } + +would cause + + bar.open() + bar.link_to("ff") + bar.link_to("aa") + bar.link_to("gg") + bar.close() + +to render as: + + links.should.eql "<div><a href=\"ff\">ff</a>----<a href=\"gg\">gg</a></div>" + +## Routes + +Keeping with our tradition of stealing from other projects, we took the code from [RouteJs middleware](http://coderack.org/users/kossnocorp/middlewares/88-routesjs) to expose to our templates all your routes. This is a big convenience and lets you put in your templates things like: + + <% var nav = new NavBar() %> + <%= nav.open() %> + <%= nav.link_to("List Pizzas", pizzas_path() ) %> + <%= nav.link_to("Modify Pizza", edit_pizza_path({id: pizza.id})) %> + <%= nav.close() %> + +which is converted into + + <ul class="linkBar"> + <li><a href="/pizzas">List Pizzas</a></li> + <li><a href="/pizzas/2/edit">Modify Pizza</a></li> + </ul> + +Note that some people might claim that it is insecure to expose your resources like this, but that probably should be dealt with on a case-by-case basis. ## Note on Patches/Pull Requests * Fork the project. * Make your feature addition or bug fix. \ No newline at end of file