How to create a dynamic object using Javascript?

Question

I'm using Javacript (with jQuery) to create a Manager object to my user interfaces. The general idea is capturing all clickable elements (defined with .clickable class) and then, based on the id of the element, create the corresponding object to deal with the action needed.

This is my Manager object definition:

function Manager() {

    this.init = function() {
        $('.clickable').click( function() {
            var l = this.id.split("_");
            var controller = Manager.ucfirst(l[0]) + "()";
            var action = l[1];
            var nclass = new controler;
        });
    };

    this.init();
}

When the user clicks a clickable element like

<a id="user_login" class="clickable">Login</a>

then this Manager should create an object User (the first part of the id with an uppercase first letter) and then execute method login (second part of the id).

But what happens, in fact, is that when I click the element I receive a "Uncaught TypeError: string is not a function".

Well, I know that string is not a function! But I am assuming Javascript is smart enoough to have something like the $$variable in PHP.

I've done some research but with no practical results. Would someone help me, please?

Answer 1

When you run this code Manager.ucfirst(l[0]) + "()" it will return you a string like "User()". Obviously this is not a constructor function to be used with new keyword. What you should do instead is something like this (providing that User is available globally):

var controller = window[Manager.ucfirst(l[0])];

Here you grab window object property by key. So controller in this case is going to be a function and everything should work.

Answer 2

Here's how you may go about that:

function Manager() {

    this.init = function() {

        $('.clickable').click( function() {
            var l = this.id.split("_");

            var controller = Manager[l[0][0].toUpperCase() + l[0].substring(1)];
            var action = l[1];

            var nclass = new controler;
        });

    };

    this.init();
 }

The point is that you should assign a function type to the controller, not a string that looks like a function invocation expression. That should work if the referred instance of Manager has a property defined which is named as the evaluation of Manager[l[0][0].toUpperCase() + l[0].substring(1)] . Otherwise, it will yet fail.

I must say the context of your issue is not very clear to me, so I suggest the following approach which might solve your problem better and wholly:

var Manager = ({
    User: function(){ // here's your user constructor
          // ...
    },
    init: function() {

        var self = this;

        $('.clickable').click( function() {
            var l = this.id.split("_");

            var controller, nclass,
                action = l[1],
                controllerName = l[0][0].toUpperCase() + l[0].substring(1);

            if(self[controllerName]){ // checking if it exist cos you never know where the shit that happens all come from.
                controller = self[controllerName]; // returns the constructor
                nclass = new controler; // invokes the constructor
            } else{
                throw new Error("Don't know what to do with unknown controller: '" + controllerName + "'";
            }

        });

        return this; // i.e self
    }
}).init();