Plugin jQuery para Handlebars

Ítalo Queiroz,JavascriptHandlebarsjQueryPlugin

Fala manolada.

Estive usando o Handlebars e percebi que eu realizava algumas ações repetitivas, que não facilitavam em nada o desenvolvimento dos templates. Daí surgiu a idéia de criar um plugin jQuery que fizesse o simples, tendo como parâmetro o caminho do template e o do json que seria recebido para a geração do conteúdo.

jHandlebars.js
;(function ( $, window, undefined ) {
    // Nome do plugin => 'handlebars';
    var pluginName = 'handlebars',
      document = window.document,
      dataJson = null,
      templateHandleBars = null,
      defaults = {
        json: {},
        template: ''
      };
    
    // Construtor do nosso Plugin;
    function Plugin(element, options) {
      this.element = element;
      this.options = $.extend({}, defaults, options) ;
    
      this._defaults = defaults;
      this._name = pluginName;
    
      this.init();
    }
    
    Plugin.prototype = {
      //Método init();
      init: function () {
        this.refresh();
      },
      //Método refresh() que cuida de instanciar o template e o json;
      //Depois monta e compila os dados para retornar o html gerado;
      refresh: function () {
        //Verifica se o template já foi instanciado e se é uma função;
        if (!templateHandleBars && !jQuery.isFunction(templateHandleBars)) {
          templateHandleBars = this._loadTemplate();
        }
        //Verifica se já está instanciado o json de dados;
        if (!dataJson || jQuery.isEmptyObject(dataJson)) {
          dataJson = this._loadJson();
        }
        //Só é possível montar o template se o "templateHandleBars" for uma função;
        if (jQuery.isFunction(templateHandleBars)) {
          var templateHtml = templateHandleBars(dataJson);
          $(this.element).html(templateHtml);
        } else {
          $(this.element).html('Ocorreu um erro no template handleBars, verifique o caminho informado.');
        }
    
      },
      //Método _loadTemplate() que carrega e instancia o template handlebars;
      _loadTemplate: function () {
        var template = this._ajax(this.options.template, 'html');
        if (jQuery.type(template) === 'string') {
          return Handlebars.compile(template);
        }
        return '';
      },
      //Método _loadJson() que carrega e instancia o json de dados;
      _loadJson: function () {
        //Se o json for um objeto ele não chama o AJAX;
        if (jQuery.isPlainObject(this.options.json)) {
          return this.options.json
        } else if (jQuery.type(this.options.json) === 'string') {
          return this._ajax(this.options.json, 'json');
        }
        return {};
      },
      //Método _ajax() responsável por realizar as requisições AJAX do plugin;
      _ajax: function (url, dataType) {
        var dataReturn = null;
    
        $.ajax({
          url: url,
          dataType: dataType,
          async: false,
          success: function (data) {
            if (data) {
              dataReturn = data;
            }
          }
        });
    
        return dataReturn;
      },
    };
    //Função que instancia nosso Plugin passando o element e os options informados;
    $.fn[pluginName] = function (options) {
      return this.each(function () {
        if (!$.data(this, 'plugin_' + pluginName)) {
          $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
        }
      });
    }
}(jQuery, window));

Para usar é muito simples

exemplo.js
$('#element').handlebars({
  json: {pessoas:[{nome:'italo'}, {nome:'queiroz'}]},
  template: 'caminho_do_template_handlebars.hb'
});
 
//ou
 
$('#element').handlebars({
  json: 'caminho_do_json.json',
  template: 'caminho_do_template_handlebars.hb'
});

Caso queiram colaborar fiquem a vontade, segue o link do GitHub (opens in a new tab) com um exemplo do uso.

RSS