How to access object methods if nested in another object instance?
I am using a library called AnimOnScroll that I create on page load like this:
new AnimOnScroll( this.find('#grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
As shown in the code, an instance of the AnimOnScroll object is bound to div
with #grid
id.
In the javascript file AnimOnScroll in a similar constructor, another library ( masonry ) is called (I removed part of the option just to read it here):
function AnimOnScroll( el, options ) {
this.el = el;
this._init();
}
AnimOnScroll.prototype = {
_init : function() {
var self = this;
imagesLoaded( this.el, function() {
// initialize masonry
new Masonry( self.el, {
itemSelector: 'li',
transitionDuration : 0
} );
I want to access the masonry methods, but I cannot find how to reach an instance of an object in AnimOnScroll.
I have managed to reload the elements, recreating a new AnimOnScroll instance each time, but I want to learn how to do it cleanly in this case (new to javascript).
Thank you for your help!
EDIT
I gave him another try to check @ Nick L.'s answer. It turns out if I use self.prototype.masonry = new Masonry( ...
, I get an error:
Uncaught TypeError: Cannot set property 'masonry' of undefined
If I replace this line with self.masonry = new Masonry( ...
, it works fine. I can get AnimOnLoad object displayed in console with open masonry
Once you've named your variables, I get this by registering scroll
. if i try to log into the log masonry
(i.e. scroll.masonry
) it shows as undefined
.
Any idea?
EDIT 2
When looking at the callback logs while creating the AnimOnScroll, I realized that the object is created after my page is rendered. This was my first mistake trying to call it when it was not loaded.
My second mistake was to assume that I can use the masonry methods without display issue. This object (AnimOnScoll) attaches the "shown" class to each object to handle transitions and track scroll position.
I would have to rewrite the method for every masonry method I need to use. Bottom line: I'll take the path of less drag, re-instantiating the AnimOnScroll object every time I need to update. it works fine. For those interested, I use a helper that provides a displayable collection of items. Before it returns it, I added:
Meteor.setTimeout(function(){
if(typeof scroller!=undefined){scroller= new AnimOnScroll(.......)}
},100);
This way the AnimOnScroll reloads immediately after refreshing my page and runs smoothly.
And I will validate your @ Nick L. answer because it was a pleasure for you to help :-)
source to share
To access object methods, you need to somehow access the object itself in general terms.
I suggest adding a masonry property containing an instance of an Masonry
object using self
then pass the constructed object there:
//Warning: Untested code
AnimOnScroll.prototype = {
_init : function() {
var self = this;
imagesLoaded( this.el, function() {
// initialize masonry
self.masonry = new Masonry( self.el, {
itemSelector: 'li',
transitionDuration : 0
} );
}
}
Then enter the object Masonry
by running:
var scroll = new AnimOnScroll();
var masonry = scroll.masonry;
//etc
EDIT: Check your debugger usage or console.log
whether or not an object is called several times , from where you call its constructor to where it is called and not found, to ensure it is constructed and used correctly.
source to share