ga-wdi-boston / ember-resources Goto Github PK
View Code? Open in Web Editor NEWPerforming handling 'actions' in Ember, and using them to perform CRUD on the model.
License: Other
Performing handling 'actions' in Ember, and using them to perform CRUD on the model.
License: Other
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
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.
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.
export default Ember.View.extend({
newPokemonData: {
nationalPokeNum: null,
name: null,
typeOne: null,
typeTwo: null,
},
generationNum: null,
action: {
createPokemon: function(){
this.sendAction('createPokemon', this.get('newPokemonData'), this.get('generationNum'));
}
}
});
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.