learn-co-students / javascript-handlebars-templates-lab-v-000 Goto Github PK

Hi Learn team,

I just went to a study group for this Lab, and we found the instructions for this lab to be quite confusing...

Currently, the lab covers multiple concepts:

• Handlebar templates
• Register and use Helpers
  • Each, If, and custom helpers
• Register and use Partials

In the 6-step lab, students are asked to nest helpers within partials within handlebar templates, the current instructions are not linear and required a lot of jumping back-and-forth and refactoring (templates into partials, partials into helpers) on the fly.

Perhaps it will make sense to split the lab up into 2 labs? Or extend instructions with more steps:

• Complete a working app complete with forms to create & edit recipes
• Start with plain Handlebar templates
• Refactor sections of code into partials
• Refactor partials into helpers where possible

Suggested instructions
PART I:

1. Create a form template with an id of recipe-form-template that will be used to enter new recipes. Make the form submit with a createRecipe() function. Provide inputs for recipe name, description, and at least five ingredients. Hint: Get comfy collecting values with getElementsByName().
2. Create a template with an id of recipe-template. This template should contain the recipe name. description, list of ingredients and an "Edit Recipe" link.
3. Render this template with the recipe data when the user submits the form.
4. On click of your "Edit Recipe" link, call a displayEditForm() function that renders a template called recipe-form-template.
5. Allow your recipe to be edited using this form, and re-render the recipe template with the updated information using a updateRecipe() function on form submit.

PART II:
6. Refactor your forms so that recipe-form and the edit form template are both constructed with the same recipe-form-template. The template should render with the recipe data for edit, and with empty values for a new recipe. Hint: Don't forget you can pass any object with any properties as the context for your templates, including, for instance, values for onsubmit.
7. Refactor recipe-template by registering a partial called recipeDetailsPartial. Create a template with an id of recipe-details-partial to hold the markup. Use the each helper to display the collection of ingredients.
8. Refactor recipeDetailsPartial by registering a custom helper called displayIngredient to display each ingredient within the each block.

Thanks!
Lisa