Vinculação sexy de HTML + JS para protótipos

Digamos que você crie um protótipo interativo com muitas visualizações e estados diferentes. Tem que ser feito agora e você sabe que usará plugins js que devem ser carregados manualmente.

E se você pudesse apenas carregar um arquivo JS e controlar seu comportamento com HTML puro, como aqui:

<select data-use="select2" data-config='{"allowClear":true}'>
// options go here
</select>

ou:

<div data-use="loadView" data-config='{"model":"pages/test.json", "tpl":"tpl/test.tpl"}'>
</div>

ou mesmo:

<input type="email" data-use="placeholderShim" placeholder="Your email">

basicamente:

<ELEMENT data-use="jquery method name" data-config='{"json config parameter":"value"}'>
# and
<ELEMENT data-use="jquery method name" data-config="config parameter or flag">

Observe que o jQuery converterá data-config para o atributo de id do objeto js começa com {}

E você pode criar essa funcionalidade com apenas algumas linhas de código:

$(function(){
  function addBehaviour(){
    var $me = $(this);
    $me[$me.data('use')]($me.data('config'));
  }

  $('[data-use]').each(addBehaviour);
});

Versão Coffeescript:

$ ->
  addBehaviour = ->
    $me = $ @
    $me[$me.data 'use'] $me.data 'config'
  $('[data-use]').each addBehaviour

Ou um doce oneliner:

clique para ver .

Desta forma, você não precisa chamar plugins jQuery manualmente toda vez que a página é carregada.

PS. Ao lidar com JSON em parâmetros elemento não se esqueça de colocar os dados em único aparelho como: . Isso é tão importante quanto usar chaves duplas apenas em JSON.<div attribute='value'></div>

PPS.
Eu me deparei com uma abordagem semelhante ao ler os documentos da interface do usuário Angular, mas não há nada que nos pare ao lidar com coisas diferentes (com alguns pequenos ajustes, é claro).

PPPS.
Esta não é uma solução de qualidade de produção. Basicamente, é meio oldschool, se você me perguntar. Se você deseja criar algo que não será usado internamente, use um bom framework mvc .