Code refactoring

src/DriverListView.js

@@ -2,8 +2,7 @@ taxi.DriverListView = Backbone.View.extend({
   className : 'taxi-driver-list',
   render : function () {
     var
-      data = this.getRenderData(),
-      html = taxi.templates.driver_list(data);
+      html = taxi.templates.driver_list(this.getRenderData());
     this.$el.html(html);
     return this;
   },

src/DriverView.js

@@ -1,86 +1,56 @@
 taxi.DriverView = Backbone.View.extend({
   className : 'taxi-driver',
-  contexts : {},
+  $passengerViews : $(),
   initialize : function (options) {
-    this.runner = options.runner;
+    this.passenger = options.passenger;
   },
-  destroy : function () {
-    var
-      runners = this.model.get('passengers'),
-      afterEach = this.model.get('afterEach'),
-      contexts = this.contexts;
-    if (afterEach) {
-      _.each(runners, function (runner) {
-        try {
-          afterEach.call(contexts[runner.key]);
-        } catch (e) {
-          console.error(e);
-        }
-      });
-    }
+  remove : function () {
+    _.invoke(this.$passengerViews, 'remove');
+    return Backbone.View.prototype.remove.apply(this, arguments);
   },
   render : function () {
     var
-      data = this.getRenderData(),
-      html = taxi.templates.driver(data);
+      html = taxi.templates.driver(this.getRenderData());
     this.$el.html(html);
-    this.$runners = this.$el.find('.taxi-driver-runners');
-    this.renderRunners();
+    this.$passengers = this.$('.taxi-driver-passengers');
+    this.renderPassengers();
     return this;
   },
-  renderRunners : function () {
+  renderPassengers : function () {
     var
-      runner = this.runner,
-      runners = this.model.get('passengers');
-    if (runner) {
-      this.renderRunner(_.find(runners, function (config) {
-        return config.key === runner;
+      passenger = this.passenger,
+      passengers = this.model.get('passengers');
+    if (passenger) {
+      this.renderPassenger(_.find(passengers, function (config) {
+        return config.key === passenger;
       }));
     } else {
-      _.each(runners, this.renderRunner, this);
+      _.each(passengers, this.renderPassenger, this);
     }
   },
-  renderRunner : function (runner) {
+  renderPassenger : function (passenger) {
     var
       key = this.model.get('key'),
-      $runners = this.$runners,
       beforeEach = this.model.get('beforeEach'),
-      contexts = this.contexts,
-      context = {},
-      $html = $(taxi.templates.runner({
-        'runner' : runner,
-        'driver_key' : key
-      })),
-      $container = $html.find('.taxi-runner-container'),
-      options = {
-        $container : $container
-      };
-
-    try {
-      if (beforeEach) {
-        beforeEach.call(context, options);
-      }
-      if (runner.callback) {
-        runner.callback.call(context, options);
-      }
-    } catch (e) {
-      $container
-        .addClass('taxi-error')
-        .text(e.stack || e.toString());
-      console.error(e);
-    }
+      afterEach = this.model.get('afterEach'),
+      passengerView = new taxi.PassengerView({
+        model : passenger,
+        driverKey : key,
+        before : beforeEach,
+        after : afterEach
+      });
 
-    $runners.append($html);
-    contexts[runner.key] = context;
+    this.$passengerViews.append(passengerView);
+    this.$passengers.append(passengerView.render().$el);
   },
   getRenderData : function () {
     return this.model.toJSON();
   },
   scroll : function (key) {
     var
       selector = '[data-key="' + key + '"]',
-      $runner = this.$runners.children().filter(selector),
-      position = $runner.position();
+      $passenger = this.$passengers.children().filter(selector),
+      position = $passenger.position();
     if (position) {
       this.$el.scrollTop(position.top);
     }

src/PassengerView.js

@@ -0,0 +1,49 @@
+taxi.PassengerView = Backbone.View.extend({  
+  tagName : 'li',
+  className : 'taxi-passenger',
+  context : {},
+  initialize : function (options) {
+    this.driverKey = options.driverKey;
+    this.before = options.before;
+    this.after = options.after;
+  },  
+  remove : function () {
+    if (this.after) {
+      try {
+        this.after.call(this.context);
+      } catch (e) {
+        console.error(e);      
+      }
+    }
+    return Backbone.View.prototype.remove.apply(this, arguments);
+  },
+  render : function () {
+    this.$el.html(taxi.templates.passenger({
+      passenger : this.model,
+      driver_key : this.driverKey
+    }));
+    this.executeCallbacks();
+    return this;
+  },
+  executeCallbacks : function () {
+    var
+      $container = this.$('.taxi-passenger-container'),
+      options = {
+        $container : $container
+      };
+    try {
+      if (this.before) {
+        this.before.call(this.context, options);
+      }
+
+      if (this.model.callback) {
+        this.model.callback.call(this.context, options);
+      }
+    } catch (e) {
+      $container
+        .addClass('taxi-error')
+        .text(e.stack || e.toString());
+      console.error(e);
+    }
+  }
+});

src/TaxiRouter.js

@@ -2,8 +2,8 @@ taxi.TaxiRouter = Backbone.Router.extend({
   routes : {
     '' : 'home',
     'driver/:driver' : 'driver',
-    'driver/:driver/:runner' : 'driver',
-    'single/:driver/:runner' : 'driver'
+    'driver/:driver/:passenger' : 'driver',
+    'single/:driver/:passenger' : 'driver'
   },
   initialize : function (options) {
     this.config = options.config;
@@ -18,17 +18,17 @@ taxi.TaxiRouter = Backbone.Router.extend({
     this.application.setView(view);
     this.application.setTitle();
   },
-  driver : function (driver, runner) {
+  driver : function (driver, passenger) {
     var
       model = this.drivers.get(driver),
       view = new taxi.DriverView({
         model : model,
-        runner : runner
+        passenger : passenger
       });
     this.application.setView(view);
     this.application.setTitle(
-      '<a href="#driver/'+model.get('key')+'">'+model.get('name')+' Driver</a>'
+      '<a href="#driver/' + model.get('key') + '">' + model.get('name') + ' Driver</a>'
     );
-    //view.scroll(runner);
+    //view.scroll(passenger);
   }
 });

src/TaxiView.js

@@ -7,24 +7,20 @@ taxi.TaxiView = Backbone.View.extend({
       collection : this.config.drivers
     });
   },
-  destroy : function () {
-    this.menu.destroy();
+  remove : function () {
+    this.menu.remove();
+    return Backbone.View.prototype.remove.apply(this, arguments);
   },
-  render : function () {
-    var
-      menu = this.menu,
-      $el = this.$el;
-    menu.render();
+  render : function () {    
     this.$el.html(taxi.templates.taxi());
-    this.$content = $el.find('.taxi-view');
-    this.$title = $el.find('.taxi-title');
-    this.$menu = menu.$el;
-    $el.find('.taxi-menu').append(menu.$el);
+    this.$content = this.$('.taxi-view');
+    this.$title = this.$('.taxi-title');
+    this.$('.taxi-menu').append(this.menu.render().$el);
     return this;
   },
   setView : function (view) {
-    if (this.view && this.view.destroy) {
-      this.view.destroy();
+    if (this.view) {
+      this.view.remove();
     }
     if (view) {
       this.view = view;

src/styles/taxi.less

@@ -6,15 +6,15 @@
   @headerPadding: 8px;
 
   .taxi-driver-list ul,
-  .taxi-driver-runners {
+  .taxi-driver-passengers {
     list-style: none;
     margin: 0px;
     padding: 0px;
   }
 
   .taxi-header,
   .taxi-driver-list,
-  .taxi-runner-name {
+  .taxi-passenger-name {
     font-family: sans-serif;
     font-size: 16px;
     a,
@@ -87,10 +87,10 @@
     left: 0px;
     right: 0px;
     overflow-y: auto;
-    .taxi-runner {
+    .taxi-passenger {
       margin-bottom: 16px;
     }
-    .taxi-runner-container {
+    .taxi-passenger-container {
       position: relative;
       margin: 4px 12px;
     }

src/templates/driver.html

@@ -1 +1 @@
-<ul class="taxi-driver-runners"></ul>
+<ul class="taxi-driver-passengers"></ul>

src/templates/passenger.html

@@ -0,0 +1,6 @@
+<li class="taxi-passenger" data-key="<%- passenger.key %>">
+  <div class="taxi-passenger-name">
+    <a href="#driver/<%- driver_key %>/<%- passenger.key %>"><%- passenger.name %></a>
+  </div>
+  <div class="taxi-passenger-container"></div>
+</li>