Variáveis ​​/ classes globais no Coffeescript

Muitas vezes, há um ponto em que um aplicativo passou por várias pequenas alterações de front-end e chamadas para refatoração. Isso geralmente leva a uma abordagem mais OO e modular no frontend.

Um dos obstáculos que encontrei no início é separar minhas aulas e suas instâncias em diferentes arquivos .coffee e, ao mesmo tempo, poder acessá-los de qualquer outro arquivo.

Esta é a abordagem que funcionou melhor para mim.

Primeiro, declaramos um contexto vazio onde toda a nossa lógica de front-end residirá em:

$ ->
  this.superapp ={}
  #Other interesting initializations for your app such as defaults etc

E aqui está um exemplo de uma classe usando a adorável biblioteca x-editable :

$ ->
  class Editable
    constructor: ()->
      this.make_editable()
    make_editable: ()->
      $('a.editable').editable()

  this.superapp.xeditable = new Editable()

Agora, em qualquer outro arquivo em meu projeto, posso acessar a instância x-editable do meu frontend. Por exemplo, gosto de preencher o conteúdo dos meus modais via ajax, é por isso que preciso tornar editáveis ​​alguns dos campos que o ajax responde:

$ ->
  $('a#trigger-modal').on 'click', ->
    #append responde of /get_content to the modal container
    $('div.modal-content').load '/get_content', ->
      #make new appended fields x-editable
      superapp.xeditable.make_editable()

Simples!