backbone / marionette / bootstrap: modal dialog example for "Confirm Delete" dialog

1_exampleUse.js

import ConfirmDelete from "./confirmDelete"
import ConfirmDeleteViewfrom "./confirmDeleteView"

var confirmView = new ConfirmDeleteView({
  model: myModel
});

ConfirmDelete.confirm(confirmView, () => {
  // delete was confirmed... do something, here
});

confirmDelete.js

import ConfirmLayout from "./confirmDeleteLayout";

var ConfirmDelete = {
  configure: function(options){
    this.region = options.region;
  },

  confirm: function(view, cb){
    var $el = $("#modal-window");
    var layout = new ConfirmLayout();

    layout.on("render", () => {
      layout.bodyRegion.show(view);
    });

    layout.on("cancel", () => {
      $el.modal("hide");
    });

    layout.on("confirm", () => {
      $el.modal("hide");
      cb();
    });

    this.region.show(layout);

    $el.modal();
  }
};

export default ConfirmDelete;

confirmDeleteLayout.js

var ConfirmDeleteLayout = Marionette.LayoutView.extend({
  template: "#confirm-delete-layout-template",
  className: "modal-content",
  regions: {
    bodyRegion: ".modal-body"
  },

  events: {
    "click .cancel": "cancelClicked",
    "click .confirm": "confirmClicked"
  },

  cancelClicked: function(e){
    e.preventDefault();
    this.trigger("cancel");
  },

  confirmClicked: function(e){
    e.preventDefault();
    this.trigger("confirm");
  }
});

export default ConfirmDeleteLayout;

confirmDeleteView.js

var ConfirmDeleteView = Marionette.ItemView.extend({
  template: "#confirm-delete-effective-dates-template"
});

export default ConfirmDeleteView;