ga-wdi-boston / ember-routing Goto Github PK

Viewstate versus Emberview

@raq929 suggests changing the following code example
https://github.com/ga-wdi-boston/ember-routing/tree/solution#routing-with-dynamic-segments

From:

 // app/routes/product.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params){
    return [
      {
        id: 1,
        name: 'Crock Pot',
        manufacturer: 'Farberware',
        price: 40
      },
      {
        id: 2,
        name: 'Food Processor',
        manufacturer: 'Cuisinart',
        price: 25
      },
      {
        id: 3,
        name: 'Electric Griddle',
        manufacturer: 'George Foreman Grills',
        price: 15
      },
    ][params.product_id - 1];
  }
});

To:

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    const id = params.product_id;

    const products = [
    {
      id: 1,
      name: 'Crock Pot',
      manufacturer: 'Farberware',
      price: 40,
    },
    {
      id: 2,
      name: 'Food Processor',
      manufacturer: 'Cuisinart',
      price: 25,
    },
    {
      id: 3,
      name: 'Electric Griddle',
      manufacturer: 'George Foreman Grills',
      price: 15,
    },
   ];
    return products.find((product) => product.id === +id);
  },
});

The diff:

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    const id = params.product_id;

    const products = [
    {
      id: 1,
      name: 'Crock Pot',
      manufacturer: 'Farberware',
      price: 40,
    },
    {
      id: 2,
      name: 'Food Processor',
      manufacturer: 'Cuisinart',
      price: 25,
    },
    {
      id: 3,
      name: 'Electric Griddle',
      manufacturer: 'George Foreman Grills',
      price: 15,
    },
-   ][params.product_id - 1];
+   ];
+   return products.find((product) => product.id === +id);
  },
});

ember-routing-static

per @raq929 016 delivery

-   Create new Routes and Templates with generators.
-   Configure the Ember Router to point to a new Template.
-   Use the `{{#link-to}}` helper to route from one view-state to another.
-   Set up resource routes.
-   Create a Route object.
-   Configure a Route to parse information from a URL.

"in the previous lesson..."
There isn't a previous lesson anymore, we've combined them here.

When ember-template is updated

License, notice, etc

@berziiii

Please note that this talk requires ember-inspector to be installed which does not get installed until https://github.com/ga-wdi-boston/ember-inspector.

Related issue: ga-wdi-boston/ember-study#116

@jrhorn424 could you weigh in?

package.json description still talks about static routing, should just be routing now.

The first part of this talk references route-controller-view a lot, but we're not using those anymore. Should we change the wording here? What should we change it to?
@jrhorn424 @gaand

This should be re-done so that it is more clear but here is an example of what might be useful either as an example in the README or delivery notes for consultants.

The URLs are in blue.
/team
/team/engineering
/team/leadership

The file names are in red
application.hbs
team.hbs
team/index.hbs
team/engineering.hbs
team/leadership.hbs

These are notes from @jrhorn424 that should be added to the ember talks and made into learning objectives. Note: This issue may be closed if it is better suited for another talk.

• If you have a model named foo, you cannot have a route named foo anywhere in the rendering hierarchy if you want the route's model hook to be activated.
• Routes with dynamic segments: their hooks are only activated from the URL. This may or may not be related to previous statement.
• Give in. You want nested routes on the front-end. Remember those rails intuitions you used to have? Nest the fuck out of your routes. parent/:parent_id/child/new should have a new route for each segment nested under the previous. Use outlets liberally. This makes re-using components easier (when you wish) and it makes associating children with parents for joins far easier.
• Stop saying "nested routes mean nested UI", JEFF! That's only true when you aren't using index routes.

These could be added below https://github.com/ga-wdi-boston/ember-routing#routing-with-dynamic-segments.

@raq929 suggests that the templates should be generated before the routes are created to stay consistent.

One example of the route being written first is
https://github.com/MicFin/ember-routing#code-along-nested-templates

Router.map(function() {
  this.route('about');
  this.route('contact');
  this.route('team', function(){
    this.route('engineering');
    this.route('leadership');
  });
});

Next, we need to set up our Templates. The appropriate syntax to use in the generator is ember g template team/something - this will let ember-cli know to create a app/templates/team and a something.hbs file inside that directory.

Please review the other examples as well.

Use .remarkrc for README format standards.

This repo doesn't use standard-js (has ;s) at least in the README. #getitouttttatherethennn

Per request by @jrhorn424

There's a solution to the final lab