not a helper?

[ryanwk]

The plan: a user can click the routines tab and it should bring the user to a list of individual routines (routine-list view), a routine view will then open up and a user will see exercises. Something isn't working. Routine is like list and routines are like lists from ember-resources. I've been following along with the ember-resources docs.

https://git.generalassemb.ly/ga-wdi-boston/ember-resources https://git.generalassemb.ly/ga-wdi-boston/ember-components

This is my error: ember.debug.js:52539 Uncaught Error: Compile Error: routine-list is not a helper

Here's how I set things up: templates/components/routines.hbs

<h2>Routines</h2>

{{routine-list/routine-create-form createRoutine="createRoutine"}}

{{#each model as |routine|}}

{{routine-list/card routine=routine }}

{{/each}}

{{#link-to "application"}} home {{/link-to}}

{{outlet}}

templates/components/routine.hbs

{{routine-list routine=model }}
{{#link-to "application"}} Go home {{/link-to}}

templates/components/stronger-routine.hbs

{{routine-create-form routine=routine createRoutine='createRoutine'}}
<h2>Routines</h2>

<ul>

{{#each model as |routine|}}
{{routine-list routine=model }}

{{/each}}

</ul>
{{#link-to "application"}} home {{/link-to}}

router.js

Router.map(function () {
  this.route('sign-up');
  this.route('sign-in');
  this.route('change-password');
  this.route('users');
  this.route('exercises');
  // this.route('exercise', { path: '/exercises/:exercise_id'});
  this.route('routines');
  this.route('routine', { path: '/routines/:routine_id'});
});

templates/components/routine-list/card.hbs

{{#link-to 'routine' routine}}
<h3>{{routine.name}}</h3>
{{/link-to}}

templates/components/routine-list/routine-create-form.hbs

<h3>Create a new routine</h3>

<form class="form-container" {{action 'createRoutine' on='submit' }}>
  <div class="form-title">Name</div>
    {{input placeholder='New Routine Name'
      value=newRoutine.name
    }}
    <div class="submit-container">
<button class="submit-button" type="submit" >Save</button>
</div>
  </form>

routes/routines.js

import Ember from 'ember';

export default Ember.Route.extend({
  model () {
    return this.get('store').findAll('routine');
  },
  actions: {
    createRoutine (routine) {
      let newRoutine = this.get('store').createRecord('routine', routine);
        newRoutine.save()
        .then(() => {
          this.get('flashMessages').warning('Routine Created')
        })
    }
  }
});

routes/routine.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params){
  return this.get('store').findRecord('routine', params.routine_id)
}
});

models/routine.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  hidden: false,
  updatedAt: DS.attr('date'),
});

components/stronger-routine.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['stronger'],
  classNameBindings: ['listDetailHidden'],
  listDetailHidden: false,
  actions: {
  toggleListDetail () {
    return this.toggleProperty('listDetailHidden');
  }
}
});

components/routine-create-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  newRoutine: {
    name: null,
    hidden: false
  },
  actions: {
    createRoutine () {
      this.sendAction('createRoutine', this.get('newRoutine'));
      this.set('newRoutine.name', null);
    }
  }
});

components/routine-list/card.js

import Ember from 'ember';

export default Ember.Component.extend({
});

I've been following along with the ember-resources docs. I'm not sure what my error means. Do I have my components/routes/templates/etc set up properly?

[scottyscripts]

I see a component for routine-list/card but do you have a component for routine-list. {{routine-list routine=model }}? What are the names of all your components? What is that error telling you>

[ryanwk]

The error is telling me that I don't have a helper called routine-list. So, what I think you're recommending is that I should create a routine-list component.

I don't know what a helper is. I've read through this: https://guides.emberjs.com/v2.2.0/templates/writing-helpers/

As of right now, my components are exercises, routine, and routines. Then there's an exercises-list and a routine-list. I have a component for creating exercises and routines called exercise-create-form and routine-create-form. I also have routine-list/card and exercise-list/card. I don't know what a card is but this seems to be what displays an exercise/routine name. I'm not entirely sure what components are either. I've followed the steps found in ember-resources and ember-components docs while trying to transform the nomenclature to fit my wireframes.

Despite reading quite a bit from various resources about Ember, everything about it from the terminology to how it works with data confuses me.

Things I've read: https://guides.emberjs.com/v1.10.0/concepts/core-concepts/ https://git.generalassemb.ly/ga-wdi-boston/ember-routing https://git.generalassemb.ly/ga-wdi-boston/ember-components https://git.generalassemb.ly/ga-wdi-boston/ember-resources https://guides.emberjs.com/v2.4.0/models/creating-updating-and-deleting-records/ https://guides.emberjs.com/v2.1.0/components/handling-events/

I would appreciate a 1:1 to review these topics if anyone is available today.

Here's my plan: There is a view for exercises and a view for routines. The exercises view simply lists all of the exercises in the database, within this view users can create an exercise and add it to the global list. The routines view lists all of the routines a user has created when they are signed in, within this view user's will be able to create a routine and add it to the list or change the name of a current routine. I'd like a user to be able to click a routine on the routines view and have it bring them to a routine view. A routine view will then list exercises specific to that routine, so that would probably be a routine-exercise view? On this routine-exercise view, users will be able to add an exercise from the global list to their routine, update the weight of an exercise on their routine, and delete an exercise from their routine.

[jordanallain]

a helper is something we can use with handlebars like {{#each}} or {{#link-to}}, they are referenced similarly to components.

[ryanwk]

ok. I renamed my stronger-routine component to routine-list and it seems to have made the error go away. The reason I named it stronger-routine was because I was following the ember-component docs steps and it was stated there to name the component listr-list. However, this changes in Ember-resources docs to shopping-list which is the equivalent to my routine-list.

[ryanwk]

I made the error go away but it's not behaving the way I inteded

[jordanallain]

what is happening? what are you expecting to happen?

[ryanwk]

I can't articulate what is happening because I conceptually don't understand how any of Embers parts (components, models, routes, templates) come together. despite reading this: https://guides.emberjs.com/v1.10.0/concepts/core-concepts/

Now what seems to be happening, is that when you click on a routine in the routines list it brings you to a new view with text that displays "routine" this is probably the routine-list/card? or routine.hbs regardless it's probably a component.

I've tried to put logs everywhere and can't figure out how to make them appear

[ryanwk]

ok so I don't need console.logs I just wrote the name of each file in each file and can see where I am being directed

[ryanwk]

When you click on a routine listed within components/routines.hbs you are presented with a list of routines (upperbody, lowerbody, etc each one being a separate routine-list/card.hbs). If you click on one of those (routine-list/card.hbs items) routines you are directed to routine-list.hbs

[ryanwk]

Now that I've mapped it out I think it should probably be components/routine-list.hbs to routine-list/card.hbs to routine-list/routine.hbs. I think I named things wrong or linked to the wrong places? How do I recover from this?

[scottyscripts]

You can just generate components you need based on their names, move your code to the appropriate files, and delete the unused ones

[ryanwk]

got it thanks guys