backbone view for bootstrap 3 modal dialog with nested view

backbone view bootstrap 3 modal dialog .js

var ModalDialog = Backbone.View.extend({
    templateId: "dialog", // this is template id 
    className: "modal fade",
    attributes: {tabindex:"-1", role:"dialog",
     "aria-labelledby":"myModalLabel",
      "aria-hidden":"true"},
    initialize: function() {
      this.render();
      //to change modal width 
      // this.$el.find(".modal-dialog").css("width","75%"); 
    },

    show: function(subView, title) {
      this.$el.find(".modal-body").html(subView.render().el);
      this.$el.find(".modal-title").html(title);
      var that = this ;
      //this event occur when modal is hide  
      this.$el.on("hide.bs.modal", function () {
        that.teardown();
      });

      this.$el.modal('show');
    },

    teardown: function() {
      console.log("teardown");
      this.remove();
    },

    render: function() {
      var html = $("#"+this.templateId).html();
      this.$el.html(html);

      this.$el.modal({show:false}); // dont show modal on instantiation
      return this;
    },
});

/*
usage
var dialog = new ModalDialog();
dialog.show(anotherBBview, "dialog title ");
----------------
template looks like this
*/

template.html

<!-- set it as inline template -->
<script type="text/templates" id="dialog">
    <div class="modal-dialog">
    <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default closebtn" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary savebtn">Save changes</button>
      </div>
    </div>
  </div>
</script>