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