Home > backbone.js, javascript > backbone.js learning note [3]

backbone.js learning note [3]

[ update 5/14/2012 ] This single page app is now available at http://whatsmyspeed.appspot.com/. Decided to go (back) with google app engine instead of heroku due to (initial start) performance reason.

I am definitely addicted to backbone.js and I just threw some backbone into the running speed calculator I wrote some time ago (with node.js):

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Speed Calculator</title>
	<style type="text/css">
		body { padding: 50px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
		a { color: #00B7FF; }
		label {width:100px;font-weight:bold;display:block;float:left;}
		input[type="text"] {width:120px;margin-right:5px;}
	</style>
</head>
<body>
	<div id="container">
	   <p> 
		  <label>Distance</label>
		  <input id="distance" type="text" placeholder="distance in miles">
		</p>
		<p>
		  <label>Time</label>
		  <input id="time" type="text" placeholder="ex: 24:25, 01:45:17">
		</p>
		<p>
		  <label>Speed</label>
		  <input id="speed" type="text">
		</p>
	</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
    <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
	<script>
		var Speed=Backbone.Model.extend({
			defaults: {
				distance:0,
				time:0
			}
		});
		var SpeedView=Backbone.View.extend({
			el:$('body'),
			events: {
				'blur input#time': 'update_model',
				'blur input#distance': 'update_model'
			},
			initialize: function() {
				_.bindAll(this, 'render');
				this.model.bind('change', this.render);
			},
			update_model: function() {
				this.model.set({
					time: $('#time').val()
					,distance: $('#distance').val()
				});	
			},
			render: function() {
				$('#speed').val('');
				var dist_str=this.model.get('distance')
					, time_str=this.model.get('time')
				if( dist_str!='' && time_str!='' && !isNaN(dist_str) ) {
					var speed=this._calc_speed(dist_str, time_str);
					if(speed!=null) {
						$('#speed').val(speed.toFixed(3));
					}
				}
				return false;
			},
			_calc_speed: function(dist_str, time_str) {
				var dist_reg=/^([0-9]+(?:\.[0-9]+)?)$/
					, dist_res=dist_reg.exec( dist_str )
					, time_reg=/^(?:(?:(2[0-3]|[0-1]?[0-9])[:])?([0-5]?[0-9])[:])?([0-5]?[0-9](?:\.[0-9]+)?)$/
					, time_res=time_reg.exec( time_str );
				if(dist_res && time_res) {
					var hours=(time_res[1]||0)*1
						, minutes=(time_res[2]||0)*1
						, seconds=(time_res[3]||0)*1
					total_seconds=hours*3600+minutes*60+seconds;
					if(total_seconds>0) {
						return 3600*dist_res[1]/total_seconds;
					} else {
						return null;
					}
				}
				return null;
			}
		});
		var speed=new Speed();
		var speedview=new SpeedView({model:speed});
	</script>
</body>
</html>
Advertisements
Categories: backbone.js, javascript
  1. No comments yet.
  1. No trackbacks yet.

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: