thr3ads.net - Rails spinoffs - Moving my old code to prototype standard. [Nov 2007]

If this information is useful, please help other people find it:
Share via:

Richard Quadling

2007-Nov-20 13:18 UTC

Moving my old code to prototype standard.

Hi.

I''m finally getting around to converting my old procedural code to
Prototype''d class based code. But I''m having an issue with
resolving
"this".

Old code (heavily trimmed) ...

var o_Form = $(''formID'');
o_Form.request({
  b_Process = false,
  onSuccess : function() {
    this.b_Process = true;
  }
  onComplete : function() {
    doStuffA(); // Must be done before any successfull work.
    if (this.b_Process) {
      doStuffB(); // Must be done after doStuffA.
    }
  },
});
function doStuffA(){}
function doStuffB(){}

So, "this" in this instance represents the request object.

This code is in a standard.js file. There are then specific.js files
which provided additional functionality.

base_form_handler.js
specific_form_handler.js (relies on things in base_form_handler.js)

Now, in my new code, o_Form is property of a class and the old code is
now in a method called formSubmit (handled via an observe in the
initialize code [snipped]).

var class_AjaxFormHandler = Class.create({
  initialize : function(s_Form) {
    this.o_Form = $(s_Form);
    // Attach events next, etc.
  },
  formSubmit : function() {
    this.o_Form.request({
      b_Process = false,
      onSuccess : function() {
        this.b_Process = true; // OK as b_Process is part of the request object.
      }
      onComplete : function() {
        this.doStuffA(); // Not OK as doStuffA is part of the
request.parent.parent/request.owner.owner idea.
        if (this.b_Process) { // OK
          this.doStuffB(); // Not OK
        }
      }
    });
  doStuffA : function() {},
  doStuffB : funciton() {}
  }
});

This code is extended into a specific form...

var class_FleetAxleConfiguration = Class.create(class_AjaxFormHandler, {
  initialize : function($super) {
    $super.initialize(''axleConfigs'');
  }
});

o_class_FleetAxleConfiguration = new class_FleetAxleConfiguration();


The problem I''m having is how do I define which "this" is
which? I''m
coming from PHP to JS, so I''m not really sure about this at all.

Effectively, "this".o_Form.request.parent.parent == "this"
in my head
and that is what I want to use, but I don''t know if parent or owner is
available to me?

Can anyone point me in the right direction?

Regards,

Richard Quadling.

-- 
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

developer-P5Ep+WoDybrQT0dZR+AlfA@public.gmane.org

2007-Nov-21 03:10 UTC

head link

Re: Moving my old code to prototype standard.

bind() would do it for you.  Attach b_Process to the 
class_AjaxFormHandler and then on the two onXXX functions use bind on 
it, like this:

onSuccess: (function() {
// code
}).bind(this);

This way, ''this'' is bound to an instance of
class_AjaxFormHandler.  Read
these for more info:

http://prototypejs.org/api/function/bind
http://alternateidea.com/blog/articles/2007/7/18/javascript-scope-and-binding

Trevan

Richard Quadling wrote:> Hi.
> 
> I''m finally getting around to converting my old procedural code to
> Prototype''d class based code. But I''m having an issue
with resolving
> "this".
> 
> Old code (heavily trimmed) ...
> 
> var o_Form = $(''formID'');
> o_Form.request({
>   b_Process = false,
>   onSuccess : function() {
>     this.b_Process = true;
>   }
>   onComplete : function() {
>     doStuffA(); // Must be done before any successfull work.
>     if (this.b_Process) {
>       doStuffB(); // Must be done after doStuffA.
>     }
>   },
> });
> function doStuffA(){}
> function doStuffB(){}
> 
> So, "this" in this instance represents the request object.
> 
> This code is in a standard.js file. There are then specific.js files
> which provided additional functionality.
> 
> base_form_handler.js
> specific_form_handler.js (relies on things in base_form_handler.js)
> 
> Now, in my new code, o_Form is property of a class and the old code is
> now in a method called formSubmit (handled via an observe in the
> initialize code [snipped]).
> 
> var class_AjaxFormHandler = Class.create({
>   initialize : function(s_Form) {
>     this.o_Form = $(s_Form);
>     // Attach events next, etc.
>   },
>   formSubmit : function() {
>     this.o_Form.request({
>       b_Process = false,
>       onSuccess : function() {
>         this.b_Process = true; // OK as b_Process is part of the request
object.
>       }
>       onComplete : function() {
>         this.doStuffA(); // Not OK as doStuffA is part of the
> request.parent.parent/request.owner.owner idea.
>         if (this.b_Process) { // OK
>           this.doStuffB(); // Not OK
>         }
>       }
>     });
>   doStuffA : function() {},
>   doStuffB : funciton() {}
>   }
> });
> 
> This code is extended into a specific form...
> 
> var class_FleetAxleConfiguration = Class.create(class_AjaxFormHandler, {
>   initialize : function($super) {
>     $super.initialize(''axleConfigs'');
>   }
> });
> 
> o_class_FleetAxleConfiguration = new class_FleetAxleConfiguration();
> 
> 
> The problem I''m having is how do I define which "this"
is which? I''m
> coming from PHP to JS, so I''m not really sure about this at all.
> 
> Effectively, "this".o_Form.request.parent.parent ==
"this" in my head
> and that is what I want to use, but I don''t know if parent or
owner is
> available to me?
> 
> Can anyone point me in the right direction?
> 
> Regards,
> 
> Richard Quadling.
> 

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Richard Quadling

2007-Nov-21 10:40 UTC

head link

Re: Moving my old code to prototype standard.

On 21/11/2007, developer-P5Ep+WoDybrQT0dZR+AlfA@public.gmane.org
<developer-P5Ep+WoDybrQT0dZR+AlfA@public.gmane.org>
wrote:>
> bind() would do it for you.  Attach b_Process to the
> class_AjaxFormHandler and then on the two onXXX functions use bind on
> it, like this:
>
> onSuccess: (function() {
> // code
> }).bind(this);
>
> This way, ''this'' is bound to an instance of
class_AjaxFormHandler.  Read
> these for more info:
>
> http://prototypejs.org/api/function/bind
>
http://alternateidea.com/blog/articles/2007/7/18/javascript-scope-and-binding
>
> Trevan
>
> Richard Quadling wrote:
> > Hi.
> >
> > I''m finally getting around to converting my old procedural
code to
> > Prototype''d class based code. But I''m having an
issue with resolving
> > "this".
> >
> > Old code (heavily trimmed) ...
> >
> > var o_Form = $(''formID'');
> > o_Form.request({
> >   b_Process = false,
> >   onSuccess : function() {
> >     this.b_Process = true;
> >   }
> >   onComplete : function() {
> >     doStuffA(); // Must be done before any successfull work.
> >     if (this.b_Process) {
> >       doStuffB(); // Must be done after doStuffA.
> >     }
> >   },
> > });
> > function doStuffA(){}
> > function doStuffB(){}
> >
> > So, "this" in this instance represents the request object.
> >
> > This code is in a standard.js file. There are then specific.js files
> > which provided additional functionality.
> >
> > base_form_handler.js
> > specific_form_handler.js (relies on things in base_form_handler.js)
> >
> > Now, in my new code, o_Form is property of a class and the old code is
> > now in a method called formSubmit (handled via an observe in the
> > initialize code [snipped]).
> >
> > var class_AjaxFormHandler = Class.create({
> >   initialize : function(s_Form) {
> >     this.o_Form = $(s_Form);
> >     // Attach events next, etc.
> >   },
> >   formSubmit : function() {
> >     this.o_Form.request({
> >       b_Process = false,
> >       onSuccess : function() {
> >         this.b_Process = true; // OK as b_Process is part of the
request object.
> >       }
> >       onComplete : function() {
> >         this.doStuffA(); // Not OK as doStuffA is part of the
> > request.parent.parent/request.owner.owner idea.
> >         if (this.b_Process) { // OK
> >           this.doStuffB(); // Not OK
> >         }
> >       }
> >     });
> >   doStuffA : function() {},
> >   doStuffB : funciton() {}
> >   }
> > });
> >
> > This code is extended into a specific form...
> >
> > var class_FleetAxleConfiguration = Class.create(class_AjaxFormHandler,
{
> >   initialize : function($super) {
> >     $super.initialize(''axleConfigs'');
> >   }
> > });
> >
> > o_class_FleetAxleConfiguration = new class_FleetAxleConfiguration();
> >
> >
> > The problem I''m having is how do I define which
"this" is which? I''m
> > coming from PHP to JS, so I''m not really sure about this at
all.
> >
> > Effectively, "this".o_Form.request.parent.parent ==
"this" in my head
> > and that is what I want to use, but I don''t know if parent or
owner is
> > available to me?
> >
> > Can anyone point me in the right direction?
> >
> > Regards,
> >
> > Richard Quadling.
Excellent. Thank you very much.

I had an interesting issue with adding a PeriodicUpdater to my class.
The onSuccess needed to access both itself and the main class (its
container).

So, by having the PeriodicUpdater as this.o_AjaxPU, add the bind(this)
to onSuccess, I can use this.o_AjaxPU.options.delay (for example).

Works REALLY well.

The code is running on a machine which runs 24/7 playing MP3 files
(audio alerts - There are jobs needing to be chased, Invoices have
been received, etc.) Thankfully, I''m not in the office where this
plays all day. I have a series of them for April 1st and Christmas
Day. Can''t wait to scare the hell out of them! Ha ha!

Thanks again.

And just in case anyone else is reading this, I would like to take
this opportunity to say thank you to all of you who have helped me and
to the developers of Prototype who deal with our requests. Without you
we would all be thinking we were really clever inline JS code!

Regards,

Richard Quadling.

-- 
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Nov 2007 - Moving my old code to prototype standard.

Moving my old code to prototype standard.

Re: Moving my old code to prototype standard.

Re: Moving my old code to prototype standard.