Question

I am using a jQuery Class plugin as so :

jQuery(document).ready(function($) {
    window.SSK.calendar = new(Class.extend({
    filter_by_filtered_names: function() {
      console.log('foobar!');
    },
      init: function() {
        if ( window.location.href.match(/name_filters/) ) {
          SSK.calendar.filter_by_filtered_names();
        };
      }
    }))
});

For some reason this returns on load :

SSK.calendar is undefined

Which tells me that the plugin class is not loading before its own call. Very strange indeed. Curious if anyone knew a remedy?

Answer 1

The behaviour seems to make perfect sense to me, even if I don’t know how Class works:

Class.extend(...) creates a new constructor function (I assume). new executes the constructor which in turn calls init. The result is assigned to window.SSK.calendar. You see, init is called upon instantiation and this happens before the instance is assigned to window.SSK.calendar.

Here is a simplified example:

function MyClass() {
    this.bar = 'baz';
    console.log(foo.bar);
}

var foo = new MyClass();

This will fail since foo is still undefined at the moment the constructor is called. The instance is the return value of the function call, hence foo cannot contain a reference to the instance before the call.

You might be able to solve your problem by simply using this to reference the instance:

init: function() {
    if ( window.location.href.match(/name_filters/) ) {
    // better in this case: if(/name_filters/.test(window.location.href))
        this.filter_by_filtered_names();
    };
}

The documentation of the plugin should mention how you can reference the instance from inside a method.