Question

I am attempting to use namespaces to better organize my sites very complicated code. I have:

var myApp = {};

myApp.fp = {
    brandCarousel: null,

    init: function() {
        // initialize brand carousel
        this.brandCarousel = new Pluit.Carousel('brand-scroll-outer', {  circular: false  });
    }
};

document.observe("dom:loaded", function() { myApp.fp.init();  });

I am using prototype 1.7 and the Pluit Carousel library.

If I try to call one of Pluit Carousels methods (moveNext) by typing:

myApp.fp.brandCarousel.moveNext()

I get a JavaScript error:

TypeError: Object # has no method ‘moveNext’

Is there something I am getting wrong when it comes to scope or namespacing? How can I access this internal function?

Answer 1

Nothing about your particular example looks especially wrong (except that it switches between myApp and masApp (typo?)). Here’s a stripped-down, dummy example to show that your approach works (and that your problem must be in another location):

var myApp = {};

myApp.fp = {
    brandCarousel: null,

    init: function() {
        // initialize brand carousel
        this.brandCarousel = new (function() {
            this.moveNext = function() {
                alert("moving!");
            };
        })  
    }
};

myApp.fp.init()
myApp.fp.brandCarousel.moveNext()

The above code alerts moving! as expected.