Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Isabel Suchanek -- Carets #35

Open
wants to merge 13 commits into
base: master
Choose a base branch
from

Conversation

isabeldepapel
Copy link

BackTREK

Congratulations! You're submitting your assignment!

Comprehension Questions

Question Answer
What role does the Model play in Backbone? It serves as a way to create a class that will have all the attributes of the objects you're pulling from the API. It's also a way to still have validations on your data without having a backend database (since everything's coming from the API).
How did the presence of Models and Collections change the way you thought about your app? I thought about it more like a Rails app since this had models and I could create new Trip objects, new TripList objects, and new Reservation objects based on Backbone models, which also meant I could have validations.
How do Backbone Events compare to DOM events? Backbone events are based on models/collections/data (I think)--i.e. they're triggered just like DOM events, but they occur based on whether a collection is updated, or whether something is saved, e.g.
How did you approach filtering? What was your data flow for this feature? Because the form filters as you type, that meant I needed to do on 'change' for the event handler, and base it on both the select box (if someone choose a different category--e.g. has name selected, and then choose continent), as well as the text input. Also, I wanted to keep the javascript as clean as possible, so I thought it made the most sense to put all the filtering functionality into the collection itself, and then simply call that method from the app.js file. Also, because I didn't want an error to occur if someone started typing without selecting a field first, I also added functionality so that if no filed is selected, the filter functionality will search across all the fields.
What do you think of Backbone in comparison to raw JavaScript & jQuery? I think I prefer raw JavaScript and jQuery. Backbone is meant to make things easier, but I'm not sure that came through for me in this project.
Do you have any recommendations on how we could improve this project for the next cohort? Don't have it before interview week

@Hamled
Copy link

Hamled commented Dec 14, 2017

BackTREK

What We're Looking For

Feature Feedback
Core Requirements
Git hygiene
Comprehension questions
Organization
Models and collections are defined in separate files
Code that relies on the DOM is located in or called by $(document).ready
Code follows the Backbone data flow (DOM event -> update model or collection -> Backbone event -> update DOM)
Functionality
Display list of trips
Display trip details
Register for a trip
Add a trip
Sort trips
General
Snappy visual feedback for user actions
API error handling
Client-side validation
Overall


for (let i = 0; i < fields.length; i += 1) {
const field = fields[i];
formData[field.name] = $(`#${field.id}`).val();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think in this case our field variable is actually already a jQuery object, so we don't need to do the ID-based lookup:

formData[field.name] = field.val();

},
// how is this handled???
error: function(trip) {
console.log(trip);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a good option here would be to do the same "Trip Not Found" error message that you have for the 204 response code case in the success handler. Although it'd probably be more accurate to use a message like "Something went wrong, please try again later."

// if already sorted, sort desc
if (fields.includes(className)) {
if (className === allTrips.comparator) {
allTrips.models.reverse();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a temporary change -- Backbone won't "know" that we've reversed the sort order for this comparator.

As a result, when Backbone decides to re-sort the collection for us (such as when a new trip is added), it will go back to the non-reversed order. How could we implement the sorting for our Backbone collection such that it will keep track of whether the sort was reversed or not?

filterBy(field, value) {
if (field === 'cost' || field === 'weeks') return this.greaterThan(field, value);

return this.includes(field, value);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Creating a new instance of the collection every time we do filterBy is definitely an interesting approach.

Contrary to most of the advice we've given about where to put code in MVC projects, I think for this case it might be preferable to implement the filtering logic in the renderTripList function, because the filtering is only intended to impact which models are displayed.

Creating new collections like this could cause significant headaches when combined with Backbone Views and the fact that we generally connect them to collections and models through event listeners.

if (model.get(attributes[i]).toString().includes(value)) return true;
// return model.get(attributes[i]).toString().includes(value);
} else {
if (model.get(attributes[i]).toLowerCase().includes(value.toLowerCase())) return true;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code section could be simplified a bit by having each attribute always get toString() called on it (which is unnecessary but harmless for the string attributes):

const val = value.toLowerCase();

for (let i = 0; i < attributes.length; i++) {
  const attr = model.get(attributes[i]).toString().toLowerCase();
  if (attr.includes(val)) return true;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants