Agility and Raphael don't like each other....

[abdielou]

I'm not sure if this is a problem with Agility or Raphael or it's just that "Javascript - DOM" programming sucks. Here's the scenario:
1- I have Agility object A.
2- object A contains a div with id='r'
3- on 'create', object A creates a Raphael object by feeding Raphael with this.view.$('#r')[0]. Raphael creates an object and gives it a transparent gradient.
4- object A is added to the document by $$.document.append(A)

Result: the gradient is not shown.
Why: Raphael creates the gradient objects in the window.document, not in $$.document which lives in memory.
Workaround: create the Raphael object after step 4, not at step 3. this way, every agility object will already live in the DOM.

[arturadib]

Hello Abdiel,

Yeah from what you're saying it sounds like Raphael's gradient objects need to live in the DOM, and in Agility objects don't go to the DOM until you use $$.document.

Another workaround perhaps is to create a master Agility object that is appended to $$.document from the beginning, and then create all your other Agility objects as children of that master object.

Either way you might have to bind to the append event of the parent object and create your Raphael object there, as it's only then that the object is guaranteed to be in the DOM.

Hope this helps.

[abdielou]

that sounds like a fair workaround. thanks. I'll try it out.

[abdielou]

Not sure if I'm following you. Here's what I tried and did not worked.

$(document).ready(function(){
    var master = $$();
    $$.document.bind('append',function(){
        // Create myRaphael object
        master.append(myRaphael);
    });
    $$.document.append(master);
});

Seems pretty obvious that myRaphael is still created in memory... so the only solution is still to create the Raphael drawings after it's appended to the DOM. In other words, to add a method (say 'draw') to myRaphael and call that method on document 'append'... ? What I don't like about this is that I loose the inherent self contained nature of Agility. Another work around is to extend Raphael with a 'setup' method and passing Agility's in memory 'document' ($$.document?).

What do you think?

[arturadib]

Sorry @abdielou I guess I'm just not familiar with Raphael to offer more feedback! All I can say is that Agility objects are always off-DOM, unless explicitly added to $$.document or to another Agility object that's already in the DOM.