From 4b0cfca539383ef2f7bcce63a71cfc11bbab4e37 Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Fri, 1 Dec 2017 02:04:45 -0800 Subject: [PATCH 01/11] Add templates for status messages, trips table rows, and trip details. Add basic HTML structure. Build loadTrips() function to retrieve trip collection. Build Trip model and TripList Collection. --- dist/index.html | 60 ++++++++++++++++++++++++++++++-- src/app.js | 37 +++++++++++++++++++- src/app/collections/trip_list.js | 12 +++++++ src/app/models/trip.js | 7 ++++ 4 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 src/app/collections/trip_list.js create mode 100644 src/app/models/trip.js diff --git a/dist/index.html b/dist/index.html index b873b1e..4358d53 100644 --- a/dist/index.html +++ b/dist/index.html @@ -2,19 +2,73 @@ - My JavaScript App + Trek! + + +
- +

Trek!

+

Adventure awaits...

+
+
+ + + + + + + + + + +
NameContinentWeeksCategoryCost
+
+
+
+ + + diff --git a/src/app.js b/src/app.js index e7af594..2d122b3 100644 --- a/src/app.js +++ b/src/app.js @@ -6,8 +6,43 @@ import _ from 'underscore'; import './css/foundation.css'; import './css/style.css'; +import Trip from './app/models/trip'; +import TripList from './app/collections/trip_list'; + +let tripList; +let tripTemplate; +let tripDetailsTemplate; +let statusMessageTemplate; + console.log('it loaded!'); +const render = function render(tripList) { + const tripListElement = $('#trip-list'); + tripListElement.empty(); + console.log(tripList); + + tripList.forEach((trip) => { + tripListElement.append(tripTemplate(trip.attributes)); + }); +}; + +const loadTrips = function loadTrips() { + tripList.fetch(); + tripList.on('update', render, tripList); + $('#trips').show(); +}; + $(document).ready( () => { - $('main').html('

Hello World!

'); + $('#trips').hide(); + tripTemplate = _.template($('#trip-template').html()); + tripDetailsTemplate = _.template($('#trip-details-template').html()); + statusMessageTemplate = _.template($('#status-message-template').html()); + + tripList = new TripList(); + + $('button#search').on('click', loadTrips); + $('#trip-list').on('click', 'tr', function() { + tripList.fetch($(this).attr('data-id')); + console.log('clicked!'); + }); }); diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js new file mode 100644 index 0000000..d26bdd2 --- /dev/null +++ b/src/app/collections/trip_list.js @@ -0,0 +1,12 @@ +import Backbone from 'backbone'; +import Trip from '../models/trip'; + +const TripList = Backbone.Collection.extend({ + model: Trip, + url: 'https://ada-backtrek-api.herokuapp.com/trips', + parse: function(response) { + return response; + }, +}); + +export default TripList; diff --git a/src/app/models/trip.js b/src/app/models/trip.js new file mode 100644 index 0000000..2926af8 --- /dev/null +++ b/src/app/models/trip.js @@ -0,0 +1,7 @@ +import Backbone from 'backbone'; + +const Trip = Backbone.Model.extend({ + +}); + +export default Trip; From c60c9dcb02e3d38a07be022764a9672edc8b9bda Mon Sep 17 00:00:00 2001 From: enigmagnetic Date: Sun, 3 Dec 2017 00:13:30 -0800 Subject: [PATCH 02/11] Add loadTrip() function to show individual trip details. Cannot get the about attribute to be recognized within the template. --- dist/index.html | 4 ++-- src/app.js | 24 ++++++++++++++++++++++-- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/dist/index.html b/dist/index.html index 4358d53..53c20ed 100644 --- a/dist/index.html +++ b/dist/index.html @@ -29,7 +29,7 @@

Adventure awaits...

-
+