Can add more destinations now.

Author: demee

app/assets/javascripts/main.js

@@ -24,9 +24,9 @@ require.config({
 require(['views/map', 'views/navbar', 'views/lhp'], function(Map, Navbar, Lhp){
   "use strict";
 
-  var map    = new Map(),
-      navbar = new Navbar(),
-      lhp    = new Lhp();
+  var map    = new Map({el: $("#map").get(0)}),
+      navbar = new Navbar({el: $("#navbar").get(0)}),
+      lhp    = new Lhp({el: $('#lhp').get(0)});
 
   map.render();
   navbar.render();

app/assets/javascripts/views/lhp.js

@@ -8,23 +8,37 @@ function(_, $, Backbone, TextInput){
   "use strict";
 
   var LHP = Backbone.View.extend({
-    el: $('#lhp')[0],
-    events: {},
+    events: {
+      'click div.add-destination': 'add_destination'
+    },
+    inputs: [],
     initialize: function(){
       var _this = this;
 
-      _this.inputs = []; //input array
-      /* There is at leats one text input, lets create views for all of them */
-      _this.$('input').each(function(index, el){
-        var inpt = new TextInput(el);
-        //_this.inputs.push(inpt);
-      });
 
     },
     render: function(){
-      var _this = this;
+      var
+      _this = this,
+      input = new TextInput();
+
+      _this.inputs.push(input); //TODO: Make it searchable & idexable, useless for now
+
+      _this.$el.find('form').prepend(input.render().el);
+
+      _this.$el.find('input').first().focus();
       _this.$el.fadeIn();
-      _this.$el.find('input').first().focus()
+    },
+    add_destination: function(){
+      var
+      _this = this,
+      input = new TextInput();
+
+      _this.inputs.push(input);
+
+      _this.$el.find('form > input').last().after(input.render().el);
+
+
     }
   });
 

app/assets/javascripts/views/map.js

@@ -8,7 +8,6 @@ function(_, $, Backbone, L){
   "use strict";
 
   var Map = Backbone.View.extend({
-    el: $("#map"),
     events: {
 
     },

app/assets/javascripts/views/navbar.js

@@ -8,7 +8,6 @@ function($, _, Backbone){
   "use strict";
 
   var Navbar = Backbone.View.extend({
-    el: $("#navbar")[0],
     events: {},
     initialize: function(){
 

app/assets/javascripts/views/text_input.js

@@ -6,27 +6,21 @@ define([
 function(_, $, Backbone){
   "use strict";
 
-  var _input_template = '<input name="location" type="text" class="search-from" placeholder="Type in Location"/>';
+  var
 
-  var TextInput = Backbone.View.extend({
-    tagName: 'input',
-    el: $('input').get(0),
-    events: {
-
-    },
-    template: _.template(_input_template),
-    initialize: function(el){
-      var _this = this;
-
-      if(!el){
-        throw new Error("el is not defined")
-      }
+  //<input name="location" type="text" class="search-from" placeholder="Type in Location"/>
 
-      //_this.setElement(el)
-
-    },
+  TextInput = Backbone.View.extend({
+    tagName: 'input',
     render: function(){
+      var $el = this.$el;
+
+      $el.addClass('search-from');
+      $el.attr('name', 'location');
+      $el.attr('type', 'text');
+      $el.attr('placeholder', 'Type in Location');
 
+      return this;
     }
   });
 

app/views/main/index.html.erb

@@ -1,7 +1,7 @@
 <div id="lhp-content">
 
   <form class="pull-left">
-    <input name="location" type="text" class="search-from" placeholder="Type in Location"/>
+
     <div class="add-destination">
       <i class="icon-plus icon-white" style="cursor:pointer;"></i>
       &nbsp;Add destination