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

Only one image - charmander.jpg; take it out of the repo and host it, and then link to it.

See deprecation messages below. It still works, for now, and correcting it should be a simple fix.

DEPRECATION: You're using legacy binding syntax: valueBinding="item.name" ('ember-repo-template/components/item-row/template.hbs' @ L6:C14) . Please replace with value=item.name [deprecation id: ember-template-compiler.transform-old-binding-syntax]

DEPRECATION: You're using legacy binding syntax: valueBinding="newItem.effect" ('ember-repo-template/components/new-item-form/template.hbs' @ L5:C19) . Please replace with value=newItem.effect [deprecation id: ember-template-compiler.transform-old-binding-syntax]

DEPRECATION: You're using legacy binding syntax: valueBinding="view.form.nationalPokeNum" ('ember-repo-template/pokemon/new/template.hbs' @ L3:C8) . Please replace with value=view.form.nationalPokeNum [deprecation id: ember-template-compiler.transform-old-binding-syntax]

Use .remarkrc

Took it out of the lesson for time, but I ended up covering it anyway and it didn't actually take that long.

{{#unless isEditable}}
  <h4>#{{pokemon.nationalPokeNum}} : {{pokemon.name}}</h4>
  <p> Generation: {{pokemon.generation}} </p>
  <p>
    Type(s): {{pokemon.typeOne}}
    {{#if twoTypes}}
      / {{pokemon.typeTwo}}
    {{/if}}
  </p>
{{else}}
  <h4>#{{input value=pokemon.nationalPokeNum}} : {{input value=pokemon.name}}</h4>
  <p> Generation: {{input value=pokemon.generation}} </p>
  <p>
    Type(s): {{input value=pokemon.typeOne}}
    {{#if twoTypes}}
      / {{input value=pokemon.typeTwo}}
    {{/if}}
  </p>
{{/unless}}
<button {{action 'updatePokemon'}}>EDIT</button>
<button {{action 'destroyPokemon'}}>DESTROY</button>

It is a work in progress that @cathyob made in cohort-016 during ember-resources second day of delivery.

It's a pain, but I think it will save SO MUCH TIME.

A big issue in this lesson is having people figure out where they supposed to be putting things.

IS:

Persist item changes to the API

In the listr-list/item component
Make listItemCompleted a computed property alias of the item component

TO:

Persist item changes to the API

In the listr-list/item component
Make listItemCompleted a computed property alias of the bound item

One of the big conceptual stumbling blocks, but it doesn't strictly need to be put together with CRUD.

IS:
Make listItemCompleted a computed property alias in the item component
SHOULD BE:
Make listItemCompleted a computed property alias of the item component

• @gaand

When you go to the 'create lists' and click back in browser, and then click forward, and then click back, etc - the delete and edit buttons are created for each instance. They don't persist to the backend and on refresh they go away. I thought of the 'transitionTo' but since the browser nav buttons aren't controlled by you you can't attach methods to them(you probably could but..eww) You could certainly 'refresh' the page on back somehow, but doesn't that defeat the purpose of Ember and Ember's data caching to speed things up? I didn't attach any code because it is browser related - the code is all fine. Googling the issue seems to suggest that this is kind of a common problem, but I didn't see any real solutions. I think the problem with hardwiring anything in would be the side effects of 'page jumping' - back and forward in the browser may not follow what I as a developer expect the user to navigate to. Any thoughts on fixes for this?

via @gaand

Maybe trying to reload the Pokemon after it's been destroyed?

Error: Attempted to handle event `notFound` on <ember-repo-template@model:pokemon::ember474:1> while in state root.deleted.saved. 
    at new Error (native)
    at Error.EmberError (http://localhost:4200/assets/vendor.js:25269:21)
    at ember$data$lib$system$model$internal$model$$InternalModel._unhandledEvent (http://localhost:4200/assets/vendor.js:126790:15)
    at ember$data$lib$system$model$internal$model$$InternalModel.send (http://localhost:4200/assets/vendor.js:126668:16)
    at ember$data$lib$system$model$internal$model$$InternalModel.notFound (http://localhost:4200/assets/vendor.js:126578:14)
    at http://localhost:4200/assets/vendor.js:123331:23
    at tryCatch (http://localhost:4200/assets/vendor.js:61667:14)
    at invokeCallback (http://localhost:4200/assets/vendor.js:61682:15)
    at publish (http://localhost:4200/assets/vendor.js:61650:9)
    at publishRejection (http://localhost:4200/assets/vendor.js:61585:5)onerrorDefault @ ember.debug.js:30877exports.default.trigger @ ember.debug.js:52928(anonymous function) @ ember.debug.js:54177Queue.invoke @ ember.debug.js:320Queue.flush @ ember.debug.js:384DeferredActionQueues.flush @ ember.debug.js:185Backburner.end @ ember.debug.js:563Backburner.run @ ember.debug.js:685run @ ember.debug.js:20105hash.error @ rest-adapter.js:761fire @ jquery.js:3099self.fireWith @ jquery.js:3211done @ jquery.js:8266(anonymous function) @ jquery.js:8605(anonymous function) @ fake_xml_http_request.js:137dispatchEvent @ fake_xml_http_request.js:181_readyStateChange @ fake_xml_http_request.js:371_setResponseBody @ fake_xml_http_request.js:431respond @ fake_xml_http_request.js:452(anonymous function) @ pretender.js:303resolve @ pretender.js:340(anonymous function) @ pretender.js:331

Via @gaand

This would emphasize that .save() does not return the record you want, so if you want to do something else to that record, you have to do it before you call save(). Additionally, since that's exactly what we need to do when we get to CRUD with associations, it might be a good idea to set it up that way in advance.

Maybe also add a route transition to the end; that would (a) demonstrate that save() returns a promise (not your record), and (b) reset the form for a new Pokemon.
e.g.

export default Ember.Route.extend({
  model: function(){
    return {
      pokemon: this.store.findAll('pokemon'),
      generations: this.store.findAll('generation'),
      regions: this.store.findAll('region'),
      types: this.store.findAll('type')
    };
  },
  actions: {
    createPokemon: function(newPokemonData, generationNum){
      var self = this;
      var pokemon = this.store.createRecord('pokemon',newPokemonData);
      pokemon.save().then(function(){
        self.transitionToRoute('pokemon.new');
      });
    },
    destroyPokemon: function(pokemon){
      this.store.findRecord('pokemon', pokemon.get('id')).then(function(pokemonRecord){
        pokemonRecord.destroyRecord();
        console.log('record destroyed');
      });
    }
  }
});

Pull from https://github.com/ga-wdi-boston/ember-data

Update learning objectives accordingly.

It ended up being a headache last time. Just take it out and use a real api instead.

Previously an alias for model.

Via @jenweber

See #4

See what was done in https://github.com/ga-wdi-boston/ember-resources-one-to-many with the sighting-form component.

Does not yet reflect that handling actions for 'destroy' was made into a "YOU DO" activity.

Add the toggleItemDone action to send the action up
Add the toggleItemDone action handler to send the action up

Tell students to not overwrite the provided config.js file and to delete the scenarios directory.
(Is there a way to do that from the console?)

(a) add an {{outlet}} to the 'pokemon' Template

My source of confusion for this point that we covered in class today is that the repo says that events bubble up in Ember. As a result, I went straight to the route and attempted to handle the event. I was under the impression that since "events bubble up" that the components were somehow linked and that the app knew the structure of the tree enough to send the event through the various layers to the route at the top. From my questions and Jeff's explanation, I learned that this is not true.

What I think is a better explanation is that events MUST bubble up in order to update the API, but WE must control the bubbling every step of the way. Events do not just bubble up by themselves. Maybe the phrasing should be changed to distance it somehow from the bubbling that we know from html and click events. I don't know if the way its worded right now is a better technical description but based on what we have learned in the class so far the two kind of conflict and were the source of confusion for me.

Avoid confusion about requirements.

See ga-wdi-boston/ember-resources-one-to-many#12

It has nice material and pagination. Yay!

e.g.

YOUR TURN : Pokemon Items

In the Pokemon games, your character can pick up and use items to affect your Pokemons' performance; a full list of in-game items can be found here. This repo currently has a Model, an Adapter, and a Mirage test fixture for a resource called 'item' - on your own, create a new /items page to show all items, and build out CRUD functionality for 'item'.

CURRENT: Link to lists from index
SHOULD BE: Link to lists route from index route

Per @gaand

Depends on: ga-wdi-boston/ember-components#22

Quick fix to get away from saying list so many times during delivery.

@gaand

In the lab directions. Keep to the naming convention used during the code-along.

The store service appears as an appendix to the main material. Perhaps we should discuss this more? I was under the impression from planning that we'd be using components to handle CRUD.

Jeff mentioned the browser is giving him an deprecation error. I'm trying to catch up to see it myself...

Better scaffolding for dealing with associations.

Update was inconsistent.

export default ApplicationAdapter.extend({
-  host: 'http://localhost:3000'
});

Instead: ember server --proxy http://localhost:3000

This requires an update to the listr-api

Jeff urges showing the error and refactoring.

This technique may be necessary for using third-party APIs