User Management Page with
Templates
- Languages: HTML, CSS, Javascript ES5, JSON
- Languages Additional: Javascript ES6 Modules
- Libraries: Bootstrap, Font Awesome, Handlebars
- API Features: DOM
Elements, Events,
Web
Storage API, XMLHttpRequest
or Fetch.
- Tools: VS Code, Live Server extension, Git (if available)
·
Patterns and Practices: Master details, MVC,
Separation
of concerns
·
Copy your User Management MVC project to a new git repository for
the starting point
Feature Specification
- Same features as User Management MVC project
Code Design
- Handlebars templates should be used to generate the
majority of HTML; all other HTML should be in the index.html file.
- Create a handlebars template in separate hbs files for the
users details view, users master view, and the message box view.
- The views should have two files: a js file for the
javascript code and an hbs file for the handlebars template.
- Add placeholders in the index.html file for where the
template generated html will be added using placeholderElement.innerHTML.
- Use XMLHTTPRequest or Fetch (preferred) to get
(asynchronously) the hbs file. (VS Code Live Server or other hosting required.)
- Compile the handlebars files only one time
(Handlebars.compile) and use the returned function repeatedly as the data
for view changes.
- If your controller has been properly separated, there
should be no or minimal changes (for initialization) to the controller.
- If your model has been properly separated there should be
no changes to the model.
- Create handlebar helpers for setting the check boxes,
radio buttons and any other help needed with data binding.
- Use the HTMLFormElement.elements
property for collecting all form data on user save (each form element should
have a name attribute).
- When loading or updating the various views, other than getting
the placeholder element and setting its innerHTML to the template-generated
html, and listening to events, there should not be any other use of the
DOM.
Handlebars
·
Handlebars is the only major library addition to this project in
this phase of the assignment. Read about it and reference the library in your
page:
o
http://redrockcodecamp.org/search/?q=handlebars
o
http://redrockcodecamp.org/educationMaterials/frameworks/js/handlebars/4.0.12/handlebars.min.js