Tag Archives: backbone

Replace confirm with Bootstrap modal and Backbone view

We all hate ugly confirms but now you can use a nice backbone view and bootstrap modal to bug your users and act on btn click.

Modal:

<div class="modal fade" id="confirm-modal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <span id="header-text"></span><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 <h4 class="modal-title">Are You Sure?</h4>
 </div>
 <div class="modal-body">
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary btn-ok" data-dismiss="modal">OK</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Backbone View:

App.Views.ConfirmModalClass = Backbone.View.extend({
   el: "#confirm-modal",
   events: {
    "click .btn-ok": "runCallBack"
   },
   initialize: function(args){
	   this.$el.find(".modal-body").html("<p>"+args.body+"</p>");
	   this.cb = args.cb;
   },
   render: function(){
     this.$el.modal("show");
  },
  close: function(){
     this.$el.modal("close");
  },
  runCallBack: function(){
       this.cb();
  }
});

Usage (from inside another view):

var that = this;
	   var confirmModal = new App.Views.ConfirmModalClass({
	      cb: function(){
				//use that to run functions for this view
	      },
		  body: "BODY"
	   });
	    confirmModal.render();
Tagged , ,

Capture Current Location inside of a Backbone Model

Here is how I take the lat and lng from the browser and turn it into a Backbone Model with a function to figure out haversine

var CurrentLocationModel = Backbone.Model.extend({
   initialize: function(){
    this.getLocation();
  },
  getLocation: function(){
        var that = this;
		if (navigator.geolocation){	
			navigator.geolocation.getCurrentPosition(function(position){
				that.set("lat",position.coords.latitude);
				that.set("lng",position.coords.longitude);
			});
		}else{
		    that.set("lat",0);
			that.set("lng",0);
		}
   },
   getDistance: function(lat,lng){
        //see http://stackoverflow.com/questions/14560999/using-the-haversine-formula-in-javascript
		var that = this;
		var R = 6371; // km 
		console.log(that.get("lat"));
		//has a problem with the .toRad() method below.
		var x1 = that.get("lat")-lat;
		var dLat = x1.toRad();  
		var x2 = that.get("lng")-lng;
		var dLon = x2.toRad();  
		var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
					Math.cos(lat.toRad()) * Math.cos(that.get("lat").toRad()) * 
					Math.sin(dLon/2) * Math.sin(dLon/2);  
		var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
		var dist = R * c;
        return(dist);		
   }
  
});
Tagged , ,

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.

Tagged , ,

Backbone Resources

I am just getting into backbone and love it. I thought I would share what resources that I am using to get familiar with it.

 

The video that got me interested in it:

https://www.youtube.com/watch?v=4udR30JYenA
Lynda also had a getting started section on it:

http://www.lynda.com/Backbone-js-training-tutorials/1583-0.html

Here is a great set of videos talking about Marionette as well, I only watched the free ones:

http://www.backbonerails.com/series/engineering_single_page_apps

Try it out some free things here but also some paid:
https://www.codeschool.com/courses/anatomy-of-backbonejs

It is very freeing to let your data be your data and your view be your view.

Tagged , ,

Convert cookies into a Backbone collection

I had a need to look at my cookies in a Backbone project and decided that I needed them in a Collection and here is how I did it.
  //Create a base ModelClass
  var cookieModelClass = Backbone.Model.extend({

  });

//Create the collection
   var CookieCollectionClass = Backbone.Collection.extend({
	   model: cookieModelClass,
	   initialize: function(){
                   //Grab the cookies and go to work
 		   var ca = document.cookie.split(';');
			for(var i=0; i<ca.length; i++)
			{
			         var cookie = ca[i].trim().split("=");
					 this.add(new cookieModelClass({
					   name: cookie[0],
					   value: cookie[1]
					  }));

			}
	}
    });

//To retrive
var cookies = new CookieCollectionClass();
cookies.where({name: 'user_email'})[0].get("value")
Tagged , ,