Forum: Rails Spinoffs (closed, excessive spam) Adding Properties to DOM::Elements as opposed to adding Methods

Hello,

Can Element::addMethods() be used to add properties to Elements in
addition to adding Methods?

I assume IE prevents properties being added to DOM::Element in
addition to preventing the adding of methods - so is it possible to
use prototype.js to add properties as well as methods to DOM::Element?

thanks for any insight.

-Eric

ex.

var myMethodsAndProperties =
{
     myFirstMethod: function( arg)
     {
         element = $(element);
         // do something
         return element;
     },

     myFirstNewProperty:  var newProperty;  ????????????????
};

Element.addMethods( 'DIV', myMethodsAndProperties );

It's generally possible, but prototype only allows for functions (i.e.
Object.isFunction -> true). I'm not exactly sure why there's this
limitation. Would you explain how extending nodes with properties
might be useful?

- kangax

Hello kangax,

I am trying to keep "state" information in the correspoding elements
themselves rather that having each element have a "brother object"
that keeps it's state information.
I can't figure out how to do that with a method as opposed to a
property.

I can think of many useful reasons for having both properties and
methods for objects in a language and this is a good example of how it
could be useful.

thanks for the feedback,

-Eric

Could the method be used as a "getter" that would return the reference
to the proper state?


--
Matt Foster
Ajax Engineer
Nth Penguin, LLC
http://www.nthpenguin.com

EricGoogle wrote:
> could be useful.
>
> thanks for the feedback,
>
> -Eric
>   
Attaching custom properties to elements is quite useful, but you don't
need to attach a property to Element.prototype in order to do it. You
should probably attach properties something like this:

$$('.brothers').invoke('writeAttribute', '__isBrother', true);

// OR
$$('.celebrity').each(function(element) {
  var brother = element.next();
  element.writeAttribute('__brother', brother);
});

// OR
$$('.celebrity').each(function(element) {
  var brotherId = element.next().identify();
  element.writeAttribute('__brotherId', brotherId);
});

If that isn't helpful, maybe you could tell us more about what your
application needs to do.

- Ken Snyder

Had to prove to myself that was even possible,  I've got it done
although I know it could be written a bit smoother, it gets the job
done for the example.  Seems like too much work to get such a simple
task accomplished but it does allow for a nice private variable,
getter/setter pattern.

var ref = function(){
          var state = 0;
          this.set = function(incoming){ state = incoming;};
          this.get = function(){ return state; };
        }
  Element.addMethods("DIV", {
    stateReference : function(ele){
        if(!ele.stateReferenceGetter)
          return ele.stateReferenceGetter = new ref();
        else
          return ele.stateReferenceGetter;
    }
  });


To check out the demo in action, 
http://positionabsolute.net/projects/javascript/Ad...

Demo goes down in Firebug basically, speaking of which today is FF 3
Download Day, show some support!!



--
Matt Foster
Ajax Engineer
Nth Penguin, LLC
http://www.nthpenguin.com

Eric, doesn't extending elements directly solve the problem?

someElement.foo = 'bar';

I also happen to use custom Element#setProperty quite often:
http://github.com/kangax/protolicious/tree/master/...

It's convenient in a context of iterators:

$(someElement).setProperty('foo', 'bar');
$$('.someClass').invoke('setProperty', 'foo', 'bar');

- kangax

Kangx,

This was working for me in my test code in Firefox but failing in IE
and I was trying my best (and it is exceedingly time wasting and
painful so far) to write CrossBrowser Code (What an extreme waste of
brain cells and time - it has taken me ten or more times as long to
write) :P
As I understand it - IE doesn't allow you to extend the Element type -
hence much of the usefullness of Prototype.js for me.

I need to have complex state objects holding perhaps other objects -
not just text data - hence why setting a text property isn't quite
cutting it either.

I'd really like to have some object references held in the state
properties for my custom Element object.

ie..   myDivObject.objectReference = someOtherObject;    etc...

Will this work???   $(myElement).setProperty( 'objRef',
myObject ) ???? or does setProperty only take strings???

thanks,

-Eric

Yes, you can do all of this.  What @kangax is saying is that you can't
extend the DOM *prototypes* in IE, so that all new elements that are 
created
in the document, whether by setting innerHTML, or whatever, have some 
new
method.  Once you fetch an object from the DOM, you can add whatever you
want to it, but it's just inconvenient to have to do it all the time
manually.  Prototype helps you out a lot, but there are cases when you 
just
have to do it yourself.

And text property means that the key is text, not the value.  You can 
make
properties refer arbitrarily to other objects.

-Fred

On Wed, Jun 18, 2008 at 11:27 AM, EricGoogle 
<eric.google@myfastmail.com>
wrote:

> myObject ) ???? or does setProperty only take strings???
>

--
Science answers questions; philosophy questions answers.

Yes, this will work.
IE allows to extend element instance, not element's [[Prototype]],
therefore manual extension every time you need to use any of the
helpers.
I can make a patch for addMethods to accept "properties" (not only
"methods") if you really need it.

- kangax

kangax,

Would a patch for addMethods to accept "properties" allow me to use
dot notation for recalling the properties values i.e. $
(myDiv).myProperty???

If so that would really make my code clean and easy to follow.  If you
could do that that would be great :)

thanks for listening and thanks everyone for the clarifications and
suggestions.

-Eric

Yes it would.
Here you go: 
http://yura.thinkweb2.com/0002-allow-to-add-properties.patch

- kangax

Hello again kangax,

thanks for the patch - I got a chance to add it to my prototype
framework today and mess with it a bit.

I think i might not be calling it right?  Am i creating a new property
correctly with addMethods() ?
---------------------------------------------------
Element.addMethods(
{
  highlight: function( element, color )
  {
    element.style.backgroundColor = color;
  },

  foo: new Object()
});

var option = new Element( 'div' );
alert( option.foo );

--------------------------------------
result "undefined";

Which browser would that be?

-- kangax

Ahh... I was too quick.  I must of tested in Firefox and not IE.

It prints "object Object" in IE6 6.0.29 - which is where i need the
functionality most.

In Firefox 3.0 (Release Version) i get undefined.

I believe I can add properties to DOM::Elements directly in Firefox -
so I can put a Browser Check there to use addMethods() in IE and add
the properties directly in Firefox.

:)

Iteresting. I tested it in Firefox 2 when creating a patch and it
seemed to work just fine.

-- kangax