Skip to content

Application Specifications

Jump to bottom
Roheem Olayemi edited this page Jan 30, 2020 · 7 revisions

Todo

It creates a new Todo list.

An in-depth analytical description of all functions:

Controller Object

It controls and regulates interactions between Model and View. Takes a model and view and acts as the controller between them

Parameters

* model object The model instance

* view object The view instance

Prototypes:

* setView (Loads and initialize 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 (An event to fire whenever you want to 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 (Removes all completed tasks 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 todos.

* _filter (Re-filters the todo items, based on the active route.)

* _updateFilterState (Simply updates the filter nav's selected states)

Model

Creates a new Model instance and connects it with the storage.

Parameters

storage object (manages data storage through the use of local session storage)

Prototypes:

* 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

Creates a new client-side storage object and will create an empty collection if no collection already exists.

  • 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)

Template

Sets up defaults for all the Template methods such as a default template

  • show (Creates an HTML string and returns it for placement in your app. NOTE: In real life, you should be using a templating engine such as Mustache or Handlebars, however, this is a vanilla JS example)

  • itemCounter (Displays a counter of how many to-dos are left to complete)

  • clearCompletedButton (Updates the text within the "Clear completed" button)

View

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

* bind(eventName, handler) Takes a todo application event and registers the handler

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

Helpers

Queries the selectors and encapsulating the DOM

Clone this wiki locally