Skip to content

4 File Structure

Jump to bottom
Aashir Sohail edited this page Aug 1, 2020 · 4 revisions

File Structure

We are going to discuss the JS files in this section since the rest are self-explanatory. We'll talk in detail what functionality each file has and how communication happens using call backs. In the js folder you will find:

  • template.js
  • view.js
  • controller.js
  • model.js
  • store.js
  • app.js
  • helpers.js

app.js

This file has the initialization logic which includes:

  • Setting up template object and passing that to view object.
  • Setting up store object and passing that to model object.
  • Setting up controller object and pass both view & model objects.

template.js

This file holds the templates for what to be displayed when user tries to enter a new To-do. Which includes

  • Show all the to-dos
  • Show remove completed to-dos when at least 1 to-do has been toggled to complete.
  • Show counter of all the active to-dos.

Functions include:

  • show Creates an
  • HTML string and returns it for placement in your app.
  • itemCounter Displays a counter of how many to dos are left to complete
  • clearCompletedButton Updates the text within the "Clear completed" button

view.js

This file has all the functionalities when we interact with the frontend of the application,

  • It also takes the interactions and delegate them to template.js.
  • It binds functions so that can be called from controller.js.

View that abstracts away the browser's DOM completely. It has two simple entry points:

  • render(command, parameterObject) Renders the given command with the options

    • showEntries responsible for showing all to-dos
    • removeItem called when you click the cross on the extreme right of a todo
    • updateElementCount shows updated count whenever new to-do is added or removed
    • clearCompletedButton toggle "Clear Completed" button
    • contentBlockVisibility toggle the main content to display or hide
    • toggleAll toggle all to-dos complete or active
    • setFilter filter the to-dos b/w Active, All & Completed
    • clearNewTodo clears to-do with css class "new-todo"
    • elementComplete mark the to-do complete i.e apply css and toggle the checkbox to checked
    • editItem enable editing when you double-click a to-do and put the to-do on focus
    • editItemDone disable editing css and put the to-do in blur

  • bind(eventName, handler Takes a to-do application event and registers the handler

    • newTodo when new to-do changes
    • removeCompleted when the clear all completed button is clicked
    • toggleAll when the arrow button is clicked
    • itemEdit when you double-click on a to-do
    • itemRemove when the cross at the extreme right is clicked
    • itemToggle when the checkbox is clicked
    • itemEditDone when ENTER key is pressed
    • itemEditCancel when ESCAPE key is pressed

controller.js

This file is responsible for acting as a middle man as well as the file responsible for delegating tasks to view and model which then further delegate those tasks to template and store. Similarly, the call backs are then used to implement 2 way communication that resembles a tree structure. Structure

The functions include:

  • setView Loads and initialises the view
  • showAll An event to fire on load. Will get all items and display them in the todo-list
  • showActive Renders all active tasks
  • showCompleted Renders all completed tasks
  • addItem Add an item. Simply pass in the event object and it'll handle the DOM insertion and saving of the new item.
  • editItem Triggers the item editing mode.
  • editItemSave Finishes the item editing mode successfully.
  • editItemCancel Cancels the item editing mode.
  • removeItem By giving it an ID it'll find the DOM element matching that ID, remove it from the DOM and also remove it from storage.
  • removeCompletedItems Will remove all completed items from the DOM and storage.
  • toggleComplete Give it an ID of a model and a checkbox and it will update the item in storage based on the checkbox's state.
  • toggleAll Will toggle ALL checkboxes' on/off state and completeness of models. Just pass in the event object.
  • _updateCount* Updates the pieces of the page which change depending on the remaining number of to-dos.
  • _filter Re-filters the todo items, based on the active route.
  • _updateFilterState Simply updates the filter nav's selected states

model.js

Model's sole responsibility is to perform CRUD operations on storage and manageing to-dos as controller delegate depending upon whatever action was taken on the view side.

Functions include:

  • create Creates a new todo model
  • read Finds and returns a model in storage. If no query is given it'll simply return everything. If you pass in a string or number it'll look that up as the ID of the model to find. Lastly, you can pass it an object to match against.
  • update Updates a model by giving it an ID, data to update, and a callback to fire when the update is complete.
  • remove Removes a model from storage
  • removeAll WARNING: Will remove ALL data from storage.
  • getCount Returns a count of all todos

store.js

Responsible for storing the to-dos in browser's local storage. Features include:

  • find Finds items based on a query given as a JS object
  • findAll Will retrieve all data from the collection
  • save Will save the given data to the DB. If no item exists it will create a new item, otherwise it'll simply update an existing item's properties
  • remove Will remove an item from the Store based on its ID
  • drop Will drop all storage and start fresh

helper.js

It defines some helper functions that are used throughtout the code to delegate handlers and add action listeners. It also provide query selector and query selector for all functiond for quickly accessing the elements.

Clone this wiki locally