Prototype 1.6.1-rc2

Posted by Nucc

PrototypeJS developers has announced 1.6.1-rc2 on March 27. The new release provides full IE8 compatibility, DOM functions have extended with clone method, you can store key value pairs binding to a node, and moreover better performance in bind() and DOM explorer functions.

Clone method: The javascript engines provide cloneNode() method for cloning an element of a DOM, but there were problems in IE, because IE copied only the node’s initialized version, every latter modifications (like attached event handling) lost. This prototype version calls cloneNode() method, so be careful with previous IE versions.

  1. clone: function(element, deep) {
  2.   if (!(element = $(element))) return;
  3.   var clone = element.cloneNode(deep);
  4.   clone._prototypeUID = void 0;
  5.   if (deep) {
  6.     var descendants = Element.select(clone, ‘*’),
  7.     i = descendants.length;
  8.     while (i–) {
  9.       descendants[i]._prototypeUID = void 0;
  10.     }
  11.   }
  12.   return Element.extend(clone);
  13. }

Storage: The storage engine provides capability to store key value pairs binding to a node. It’s very useful when some variables are in connection with a specified DOM element. If the element was dropped, you should remove all variables, which would become unusable. If we didn’t do this, after a while our site would eat the user’s memory, or have to clean the trashes by us.

Usage:

  1. // Creating new storage
  2. var storage = Element.getStorage( $(‘foobar’) );
  3.  
  4. // Attaching {foo: "bar"} to node foobar
  5. $(‘foobar’).store("foo", "bar");
  6.  
  7. // Get the value
  8. alert(storage.get("foo"));
  9.  
  10. // Remove node
  11. $(‘foobar’).remove();

The only problem is IE8 doesn’t release the memory in my tests. I’ve tried to store 50000 strings to observe memory statistic. IE8 reserved 2 megabytes, and dropping the node didn’t realize in memory state. In FF 3.0.7 memory release works fine (it’s not strange).

New events: Events mouseenter and mouseleave are the same as mouseover and mouseout, new namings are introduced because Microsoft prefers the first pair.


Another day with merb and merb-assets

Posted by Nucc

I had a long morning with javascripts helpers. Two days ago, I had installed merb-0.9.0, because I have would try to probe what new features get. The main changes is the separation of merb and merb-gen. The scripts directory was removed, and we can generate models, controllers, … with merb-gen.

merb-gen project
cd project
merb-gen model user

It was long time, until I found this. I started to write some models, controllers, and views. And views… This cause my long-long morning. In merb, we can seperate the javascript code and the layout. It’s very important, when we have a lot of views with one common layout. Let’s look, how does it work… First, (it’s very important!!!) we need to set in config/init.rb

  1. dependency "merb-assets"

It contains our javascript helpers. In merb we can set bundles, but this is another story. Next, we create the layout, it will be a very simple layout…

  1. <html>
  2.   <head>
  3.     <title> Project </title>
  4.     <%= include_required_js %>
  5.   </head>
  6.   <body>
  7.     <%= catch_content :for_layout %>
  8.   </body>
  9. </html>

include_required_js is a target, that will insert the

Let us look the Users/create view. In this view, we will use prototype framework.

  1. <%- require_js "prototype" %>
  2.  
  3. <div id="content">
  4.   blablabla
  5. </div>

And the result:

  1. <html>
  2.   <head>
  3.     <title> Project </title>
  4.     <script src="/javascripts/prototype.js" type="text/javascript"></script>
  5.   </head>
  6.   <body>
  7.     <%= catch_content :for_layout %>
  8.   </body>
  9. </html>

It was 4 hour in the morning, I downloaded the newest version from git, and the solution was dependency merb-assets. But works :)