Issues with updating record - ember

[antleo1995]

I have been trying to finish my crud machine with ember and my project 2 backend. I have all but update working. I have a component for edit-recipe, and a form I am attempting to bind to the values of my recipe(.title, .directions, etc.)

I am not having much success.

Components/edit-recipe.js:

import Ember from 'ember';

export default Ember.Component.extend({
  recipe: {},

  actions: {
    updateRecipe (recipe) {
      this.sendAction('updateRecipe', this.get('recipe'));
      console.log("testing updateRecipe", this.get('recipe'));
    }
  },
});

templates/components/edit-recipe.js

<label for="recipe">Title</label>
{{input value=recipe.title}}
<label for="recipe">Ingredients</label>
{{input value=recipe.ingredient_list}}
<label for="recipe">Directions</label>
{{input value=recipe.directions}}
{{#link-to 'recipe'}}<button type='button' {{action 'updateRecipe' recipe=recipe}}>Edit</button>{{/link-to}}

template/recipe/edit.hbs

{{edit-recipe updateRecipe='updateRecipe' recipe=recipe}}

template/recipe.hbs

<p>Recipes list</p>
<ul>
{{#each model as |recipe|}}
<li>
  <div {{action 'toggleListDetail'}}>{{recipe.title}}</div>
    {{recipe-detail recipe=recipe}}
    {{delete-recipe deleteRecipe='deleteRecipe' recipe=recipe}}
    {{#link-to 'recipe.edit' recipe=recipe}}<button>Edit</button>{{/link-to}}

</li>
{{/each}}
</ul>
{{outlet}}

Overall I think I am getting the hang of ember, but I could really use just a little 1:1 to guide me the rest of the way on this as this crud action will finalize the basic conversion of the site to ember, after which I need to add another resource and pretty it up.

[jordanallain]

are you getting any errors? what is happening that doesn't match your expectations?

[antleo1995]

desc = "Cannot call set with 'title' on an undefined object.", test = false

Essentially it is not passing along the recipe object as I expect for updating.

[antleo1995]

I get that when trying to type into the form to start the update process.

[payne-chris-r]

Are you trying to edit or create something in a value field inside a route template? You typically want to extrapolate that into a component and bind it there. The issue has to do with binding the value Ember is trying to update (using calling .set) title because you've bound it, but it's not able to.

[antleo1995]

I am attempting to do an update. I think I follow what you are saying but I also thought that was what I was doing. Getting a bit lost in my own code.

[antleo1995]

I also have a service setup for creating records I thought I could employ here for updating, but I wasn't entirely sure how I could get the recipe id.

Here's the service I have setup with a custom ajax call: app/services/recipe.js

import Ember from 'ember';
import { storageFor } from 'ember-local-storage';

export default Ember.Service.extend({
  ajax: Ember.inject.service(),
  credentials: storageFor('auth'),
  isAuthenticated: Ember.computed.bool('credentials.token'),

  create (recipe) {
    return this.get('ajax').post('/recipes', {
      data: {
        recipe: {
      title: recipe.title,
      ingredient_list: recipe.ingredients,
      directions: recipe.directions
    }
  }
    });
  },
  update (recipe) {
    return this.get('ajax').post('/recipes/' + recipe.id, {
      data: {
        recipe: {
      title: recipe.title,
      ingredient_list: recipe.ingredients,
      directions: recipe.directions
    }
  }
    });
  }

});

[payne-chris-r]

http://daddyissuesla.com/wp-content/uploads/2016/04/Y-tho.jpg

[payne-chris-r]

All of those look like non-custom (aka RESTful) routes...

[payne-chris-r]

You might be getting lost because you've made it more complicated than you likely need to. Start simple. Then make it more complicated if and ONLY IF you NEED to.

[antleo1995]

That's what I am asking as well. I figured they were restful routes but i am just not seeing how to pass the information to my calls. The create recipe does work though.

[payne-chris-r]

So would've just calling this.get('store').createRecord('thing', {}).save() or something along those lines without any of that service mumbo jumbo! 😜

[antleo1995]

Ok, well I'm not really caught up on that so much as it did work for creation. I'm now just trying to figure out how to get this information over to an update method. But that is useful to know, and probably why the page isn't updating automatically. So I may revisit that part.

[antleo1995]

Trying to refactor - have made a bigger mess thus far.

[antleo1995]

So, I have managed to refactor, but still essentially have the same issue. I now have an edit route which brings me to my edit form but still throw an error like before due to data binding. Feeling very much lost on this....

[payne-chris-r]

Do you have a recipes route? Post your routes.js file plz

[antleo1995]

Aye, and a recipe edit route - to match how it was done in ember-resources. The routes work but I am still not getting the recipe object to be picked up by the edit button - so that component i guess - Which is rendered by the edit-recipe route edit-recipe.hbs

{{recipe-detail/edit recipe=model}}

I just have a test in the recipe-detail/edit component as I don't think my code is rendering.

If it helps I have it deployed in its current state: https://antleo1995.github.io/ember-recipe-app

You can see the routing there.

[antleo1995]

routes/recipes.js:

import Ember from 'ember';

export default Ember.Route.extend({
  recipe: Ember.inject.service(),
  flashMessages: Ember.inject.service(),
  classNames: ['recipe'],
  classNameBindings: ['listDetailHidden'],
  listDetailHidden: false,
  model () {
    return this.get('store').findAll('recipe');
  },
  actions: {
    create (recipe) {
      this.get('store').createRecord('recipe', recipe).save()
      // console.log('Test in recipe route and recipe is: ', recipe);
      // //     this.get('recipe').create(recipe)
          .then(() => {
            this.transitionTo('recipes');
          });
       },
      toggleListDetail () {
        console.log('testing toggleListDetail');
      return this.toggleProperty('listDetailHidden');
    },
    deleteRecipe(recipe) {
      console.log('Testing deleteRecipe in recipe.js route and recipe', recipe);
      recipe.destroyRecord();
    }
 }
});

route/recipe.js

import Ember from 'ember';

export default Ember.Route.extend({
  recipe: Ember.inject.service(),
  flashMessages: Ember.inject.service(),
  classNames: ['recipe'],
  classNameBindings: ['listDetailHidden'],
  listDetailHidden: false,
  model (params) {
    return this.get('store').findRecord('recipe', params.recipe_id);
  },
  actions: {
 }
});

routes/recipe-edit.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    save (recipe) {
      recipe.save()
      .then(()=>{
        this.transitionTo('recipes')
      })
    }
  }
});

I think that route file might need a model - just noticed this.

and also my router file

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    save (recipe) {
      recipe.save()
      .then(()=>{
        this.transitionTo('recipes')
      })
    }
  }
});

[antleo1995]

Officially closing this. What I found was I wasn't following my routes. I created a bit of a mess during all my thrashing. I finally gave up last night for fear of making things much worse. I did update the UI though to look pretty much like i want, at least for now, and then called it a night.

This morning I found where I wasn't reading my routes correctly and once I had tracked down the appropriate route, I merely needed to pass in the model at the top of the route and it passed down as I expected. I then passed up my action to the top and the change persists to the DB. Now I just need to work on my next feature I have converted my original site the bulk of its function to ember.