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!