SPA

spa

The spa is a global variable that provides an access point to the page management system methods.

spa.subscribe(page, [load_action], [unload_action])

Subscribes a new page to the SPA system

It's necessary to subscribe/add the page using this method in order to make it navigable by the user.

---

• page - Page - A Page object that stores all information about a document section
• load_action(page, params) - fn|fn[] - The callback function (or an array of functions) that will be called every time user navigates to this page
• page - Page - The current page obejct
• params - object - The data sent to this page
• unload_action(page) - fn|fn[] - The callback function (or an array of functions) that will be called every time user lefts this page
• page - Page - The page obejct

---

If we have a page called "login" in our HTML:

<section data-page="login">
</section>

We should do this in order to subscribe the page:

// *Subscribing the section with data-page="login" as a page:
spa.subscribe(new Page('login'));

Optionally we could pass callbacks:

spa.subscribe(
   new Page('login'), 
   function(page, params){
      console.log('user navigated to login page');
   }, 
   function(page, params){
      console.log('user just left login page');
   });

Other way of getting the same result:

spa.subscribe(new Page('login'), login_onUserNavigate, login_onUserLeft);

function login_onUserNavigate(page, params){
   console.log('user navigated to login page');
}

function login_onUserLeft(page, params){
   console.log('user just left login page');
}

spa.onNavigate(page_name, action)

Defines an action (or a group of actions) to be executed when user navigate to a given page

---

• page_name - string - The page's name
• action(page, params) - fn|fn[] - A function (or functions) that will be called every time user navigates to this page
• page - Page - The current page object
• params - object - The data sent to this page

---

// *Assigning an action to navigation event on the "login" page:
spa.onNavigate('login', function(page, params){
   console.log('Welcome to the login page');
});

spa.onUnload(page_name, action)

Defines an action (or a group of actions) to be executed when user left a given page

---

• page_name - string - The page's name
• action(page) - fn|fn[] - A function (or functions) that will be called every time user lefts this page
• page - Page - The page object

---

// *Assigning an action that will be executed when the user left the "login" page:
spa.onUnload('login', function(page, params){
   console.log('Get back soon');
});

spa.navigateTo([page_name], [params])

Navigates to a new page

It basically stacks a new history state (via History API), triggers the loading action of the given page, and unloads the previous one.

This will only work if called after SPA gets loaded.

---

• page_name - string - Is the page's name. If left empty, the default page will be loaded instead
• params - object - The serialized data that will be passed to the page when it loads

---

// *Navigating to the login page, passing any data:
spa.navigateTo('login');

// *Navigating to the user-info page, passing some information:
spa.navigateTo('user-info', {id: 20, name: 'John Doe', email: '[email protected]'});

spa.setFallbackPage(page_name)

Sets the fallback page

The fallback page will be loaded whenever the SPA system could not resolve a page name.

The SPA system will add the first subscribed page as the fallback, but it can be changed anytime after.

---

• page_name - string - The page's name
  
  

spa.onReady(action)

Adds an action listener that'll be called when SPA system is ready.

---

• action - fn - The callback function to be called
  
  

spa.getPages()

Retrieves all pages

Page

A class that represents a page (or a section) inside the application.

constructor(name)

Instantiate a new Page object

---

• name - string - The page's name. It needs to be unique, as the SPA system will use it in order to identify the page, and to define all the urls routes
  
  

getDOM()

Retrives the html element of this page