Widgets javascript mais simples

Crédito: #dangaytan

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 (‘ajaxComplete’, function (e) {initializeControllers ()}); com 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'