Widget de javascript mais simples

Uma das coisas que eu realmente amo no angularjs é sua maneira de controlar. Eles parecem ser widgets com seu próprio escopo e seu próprio comportamento.

Infelizmente, às vezes o projeto é tão grande que não é permitido mudar para um novo framework como esse, então criei este trecho para tornar possível carregar controladores em um show já em execução.

function initializeControllers(){
  $('[js-controller]').each(function(index, el){
    var controllers = ($(el).attr('js-controller') || '')
                        .replace(/s+/g, ' ')
                        .split(/s/);
    if ($(el).data('jsControllersInitialized') === undefined){
      $(el).data('jsControllersInitialized', []);
    }
    for (i = 0; i < controllers.length; i++){
      if (controllers[i] === ''){ continue };
      if ($(el).data('jsControllersInitialized').indexOf(controllers[i]) >=0 ){ continue };
      eval("new " + controllers[i] + '(el)');
      $(el).data('jsControllersInitialized').push(controllers[i]);
    };
  });
};

Agora, você pode inicializar os controladores a cada solicitação ajax em elementos que ainda não foram inicializados usando $(document).on('ajax:complete', function(e){ initializeControllers() });jquery, por exemplo.

Aqui está um exemplo de seu uso:

html

<div js-controller='OneController SecondController'>
  <a js-one-trigger>First action</a>
  <a js-second-trigger>Second action</a>
</div>

café

class window.OneController
  constructor: (el)->
    @parent = $(el)
    @parent.on('click', '[js-one-trigger]', @doThis)
  doThis: =>
    console.log 'This'

class window.SecondController
  constructor: (el)->
    @parent = $(el)
    @parent.on('click', '[js-second-trigger]', @doThat)
  doThat: =>
    console.log 'That'

Felicidades!