modal component based on bootstrap modal

modal.hbs

<div class="modal fade" id="modal_{{ id }}" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">{{ title }}</h4>
      </div>
      <div data-hook="container" class="modal-body"> </div>
      <div class="modal-footer">
        <button data-hook="save" class="btn btn-default">Save</button>
        <button data-hook="close" class="btn btn-default" data-dismiss="modal">Close</button>
      </div><!--.modal-foooter-->
    </div><!--.modal-content-->
  </div><!--.modal-dialog-->
</div><!--.modal-->

modal.js

/**
 * @author Facugon
 *
 * how to use.
 * 1. include
 * 2. instantiate
 * 3. render
 * 4. show
 * 5. tada!
 *
 * source :
 *
 * var modal = new Modal();
 * modal.render();
 * modal.show();
 *
 */
var Modal = function (specs) {
  var _template = Templates['./modal.hbs'];

  this.specs = specs||(specs={});
  if(this.specs.autoRender === true){
    this.render();
  }

  this.queryByHook = function(name){
    return this.find('[data-hook=' + name +']');
  }

  this.find = function(selector){
    return this.$el.find(selector);
  }

  this.bindEvents = function(){
  }

  this.renderTemplate = function(){
    var div = document.createElement('div');
    div.setAttribute('data-hook','modal-container');
    document.getElementsByTagName('body')[0].appendChild(div);

    div.innerHTML = _template({
      title: this.specs.title,
      id: Date.now()
    });
    this.el = div.firstChild;

    var backdrop = (typeof this.specs.backdrop == 'boolean') ? this.specs.backdrop : 'static';

    this.$el = $(this.el);
    this.$el.modal({
      show: false,
      keyboard: false,
      backdrop: backdrop
    });

    this.bindEvents();
    this.parent = div;

    return this.el;
  }

  this.render = function () {
    this.renderTemplate();

    if (this.specs.save_button===false) {
      this.queryByHook('save').remove();
    }
  }

  this.remove = function(){
    this.$el.remove();
    this.parent.remove();
  }

  this.show = function(){
    this.$el.modal('show');
  }

  this.hide = function(){
    this.$el.modal('hide');
  }

  var _content;
  Object.defineProperty(this, 'content', {
    get: function(){ return _content; },
    set: function(view){
      var container = this.queryByHook('container');
      container.append( view.el );
    },
  });

  return this;
}