Custom Events with Prototype

Question

Possible Duplicate:
setTimeout() inside JavaScript Class using “this”

I found this interesting article on how to implement custom events in javascript with prototype: http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/

But I'm a little stuck on how to implement this, I have this simple app with a interval that triggers a function every second.

function App() {
    window.test = 'test';

    this.loginTimer = setInterval(this.checkLogin, 1000);

    EventTarget.call(this);
}
App.prototype = new EventTarget();
App.prototype.constructor = App;

App.prototype.checkLogin = function() {
    this.fire('test');
}

But this is throwing me an error:

Uncaught TypeError: Object [object Window] has no method 'fire'

I've used the same method as described in the article, is there something i'm missing?

The `checkLogin` function in the interval is not called *on* your App, use `setInterval(this.checkLogin.bind(this), …` — Bergi, Nov 07 '12 at 10:33
Btw: I don't think you really want all your apps to inherit from only one common `EventTarget` instance - if your App should be a singleton, create it as one. — Bergi, Nov 07 '12 at 10:34
My App is only used once, it servers more as a global thing where I can keep track of variables and call events for different stats, while your solution seems to work, i'm not sure if it's really calling anything. I just started out with Prototype, so it's possible I'm just not understanding it clearly yet: http://pastebin.com/YdaY6tjF — woutr_be, Nov 07 '12 at 10:39
Your `Player` listens to a different event target. Btw, it has nothing to do with Prototype - the [`this` keyword](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this) is plain JavaScript — Bergi, Nov 07 '12 at 10:44
@Bergi I wasn't referring to the 'this', more as in how to implement this. — woutr_be, Nov 07 '12 at 10:53
No, I would only need one Player object, but I thought using Prototype here would help since I wanted to keep everything separated. Do you have a better solution? — woutr_be, Nov 07 '12 at 11:02

score 0 · Accepted Answer · answered Nov 07 '12 at 11:19

var app;
function createApp() {
    if (app) return app; // singleton - always the same instance
    app = new EventTarget(); // basically being the EventTarget object
    // and extending it with additional properties (as following)
    // you also could make the EventTarget a property of a plain app object
    app.checkLogin = function() {
        this.fire('test'); // this === app if invoked as a method
    }
    app.loginTimer = setInterval(function() {
        app.checkLogin(); // call the method *on* the app
    }, 1000);
    return app;
}

var player;
function createPlayer() {
    if (player) return player; // again, singleton pattern
    player = {};
    player.play = function() {
        console.log('event tester');
    };
    // get the app singleton (or create it if not existing)
    // and add the listener to it
    createApp().addListener('test', function() {
        player.play(); // call the method
    });
}

// usage:
createApp();
createPlayer();
// starts logging "event tester"

Thanks, I didn't use your code, but still used my Prototype method. I simply passed the App instance to my Player and binded the event to that, works fine now. — woutr_be, Nov 08 '12 at 02:17

Custom Events with Prototype

1 Answers1