2 things I like in prototype 1.6.1
March 31st, 2009The stable version of prototype is 1.6.0.3. I just fiddled around with the edge version (1.6.1_rc2) and I found 2 new features I really like. The first one is the Element#clone method. At last I can easily clone an element, or make a deep clone of it passing true as first argument:
<div id="genres"> <div class="genre"> <select name="genre[]"> <option>Your favorite genre...</option> <option>Death Metal</option> <option>Black Metal</option> <option>Speed Metal</option> </select> </div> </div> <a id="add-genre" href="#">Add</a>
document.observe("dom:loaded", function() { $("add-genre").observe("click", function(event) { event.stop(); var genres = $("genres"); genres.insert(genres.down(".genre").clone(true)); }); });
Just click the Add link to add a new the select tag.
Another cool new feature is the Element Storage. You can store any kind of data inside a element, and retrieve it when you need it.
Here an example:
<div id="items"> <div class="item" id="item-1"> <h1>Item 1</h1> <a href="#" class="save">Save</a> </div> <div class="item" id="item-2"> <h1>Item 2</h1> <a href="#" class="save">Save</a> </div> </div>
document.observe("dom:loaded", function() { var item = $("item-1"); var data = item.retrieve("data", {}); data.url = "http://cowboys.from.hell/items/1"; $("items").select("a.save").invoke("observe", "click", function(event) { alert(event.target.up(".item").retrieve("data").url); }); });
Just click the first save link and an alert will display the url I previously stored inside the first item element.
Given what I’m seeing I’m pretty excited about the upcoming version of prototype.














