The App - Atileon/OC-p8 Wiki

Visual Components

Visual Components

How it Works

the app are based on MVC pattern. What it means? lets explain this into a graphic

MVC

Source: Wikipedia

File structure (js)

├── js
|  ├── app.js
|  ├── controller.js
|  ├── helpers.js
|  ├── model.js
|  ├── store.js
|  ├── template.js
|  └── view.js

On the next section we will focus on the MVC pattern.

Now I will explain fastly the another files:

Template

This file contains how the name say: the template for the application that would be manipulated by the View component of MVC

templateJs

Store

This file store the data inserted on our application and would create an storage on the client side

storeJs

Helpers

This file contain helper functions that could be called frequently in this case there are some computation that could be do it frequently. Maybe the snapshot of a piece of this helpers could help you figure out:

helpersJs

Go to Top

The MVC

Here are the essential components (files) of our app.

App

First of all let see the app.js file which encloses all the modules where you will see practically how these works (see comments):

function Todo(name) {
      //Db on client created
		this.storage = new app.Store(name);
      // Model that manipulates the storage
		this.model = new app.Model(this.storage);
      // Template created
		this.template = new app.Template();
      // View that manipulates the Template
		this.view = new app.View(this.template);
      // Controller that iterates with view on model
		this.controller = new app.Controller(this.model, this.view);
	}

Giving a name to our ToDo thus that would be the name of the storage

   let nameTodo = 'todos-vanillajs';

Creation of our app

	var todo = new Todo(nameTodo);

This function set the view takin as reference the anchor part of the URL (see note below)

   function setView() {
      todo.controller.setView(document.location.hash);
   }

So, when the home page loads the setView would take the value of ' / ' Thus the first view displayed would be "all items (ToDos)"

   $on(window, 'load', setView);

When the "window's hash" changes the setView place the view with the respective hash: i.e '#active' will display the Tasks uncompleted of our ToDo

   $on(window, 'hashchange', setView);

Notes: For more information about location.hash go to w3schools or about the Window.location go to MDN web docs

Go to Top -------/-------/------- Next -> Model