Use Bootstrap Modal as a view

Bootstrap modals are a nice way to alert users without using the basic JS alerting mechanism. I use them when I can and wanted to tie one to a backbone view and it was not hard at all:

Modal HTML:


<div class="modal fade" id="delete_modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <h4 class="modal-title">Delete Sheet</h4>
 </div>
 <div class="modal-body">
 Are you sure that you want to permantely delete this sheet?<br>
 <b></b>Please note that we are trying to keep a history of sheets and only sheets with major mistakes should be deleted.</b><br>
 <br>
 Click Delete Sheet to confirm and your sheet will be deleted and a blank template will be placed into the edit area.
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-danger" id="delete_sheet">Delete Sheet</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

var DeleteSheetModalClass = Backbone.View.extend({
   el: "#delete_modal",
   initialize: function(){
     this.$el.modal("show");
   },
   events:{
      "click #delete_sheet": "deleteSheet"
   },
   deleteSheet: function(){
        var that = this;
		that.collection.remove(that.collection.where({sheet_id: that.model.get("sheet_id")})[0]);
		that.model.destroy({success:function(){
		that.collection.fetch();
		that.collection.trigger("reset");
		$("#sheet_type").change();
		}
		that.$el.modal("hide");
		});
   },
   render: function(){
    
  }

Essentially, you just need to set the el and events correctly and you are ready to go. I placed my modal(“show”) in init but it may be better off in render, that is up to you.

Advertisements
Tagged , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: