Question

I have this class written in CoffeeScript:

Notification.js.coffee

class Notification

  display: ->
    @dom.show()

  constructor: (header, messages) ->
    @render(header, messages)

Basically, the logic for render() function code is to inject HTML into the DOM (but hidden) and display() method simply shows the DOM element. Now, I have some other class separate to this one where I’m trying to make use of this above class.

SharerController.js.coffee

class SharerController

  post_story: ->
    # some user action posting something in the app
    notification = new Notification('Header', ['This story has been posted.', 'You can post more. Would you like to?'])
    notification.display()

Unfortunately, for some reason – I get

TypeError: 'undefined' is not a function (evaluating 'notification.display()')

on the line above where I do notification.display(). The same code works absolutely as expected If I write it within the Notification class (where everything gets wrapped into an IIFE). The load order for above files is: Notification.js and then SharerController.js

What exactly am I missing here?

Answer 1

You’re missing several things:

1. The Notification in your SharerController is not the same as the Notification you’re defining in Notification.js.coffee. I think you’re picking up Chrome’s native Notification and that doesn’t have a display method.
2. There is no @dom in your Notification so your display call will fail if you ever manage to call it.
3. There is no render method in your Notification so your Notification constructor will fail due to the @render call.

If you’re only including a sample of your Notification code then (2) and (3) aren’t really problems.

CoffeeScript wraps the generated JavaScript in a self-executing function something like this:

(function() {
  // JavaScript goes here...
}).call(this);

so your Notification isn’t visible outside your Notification.js.coffee file. You can make it globally visible by saying:

class window.Notification
  #...

or

class @Notification
  #...

or you could use your own namespace as in this other question.

Once you’ve made your Notification available to the rest of your application you can instantiate your own Notification, solve your other problems, and finally you’ll be calling display on something that has a display method.