Vanilla JS SPA - How to load specific scripts under the inserted html of the SPA View

Question

I am making Vanilla JS SPA - APP - and all works fine beside that when a View is loaded in the "app" container the html is loaded fine but javascript under the html is not executed. Is there a way to make JS script under the html execute? There are different scripts for every view so it could be good if it was possible to load them together with the relevant html for the specific View.

Regards

Register VIEW:

// Imports
// Using the abstract class
import AbstractView from "./AbstractView.js";


// Class ###########################################################>
export default class extends AbstractView {

    // Constructor =================================================>
    constructor() {   
        super(); // The abstract class Constructor "Base constructor"
        this.setTitle("Register");
    }



    // Get Html ====================================================>
    async getHtml() {
        return `

      
       

                Register
                

        
        
            Email:
            
            
        



        
            Password:
            
            
        



        
            Repeat Password:
            
            
        



        
            FirstName:
            
            
        



        
            LastName:
            
            
        



        
            Age:
            
            
        


        
            Phonenumber:
            
            
        



        
            Remember Me:
            
        
             

            
           
   
                 
    
    
 


 

    

        
        
            Dashboard
            Posts
            Settings
        
        
        
            
                Register
                Log In
                Log Out

user13028588 · Accepted Answer

I found the solution - I have the specific Views - "pages" - which are using abstract View. The abstract view has the getHtml - method and the Client router is the one that inserts the selected view into the

- the view container. I just needed to add another method to the abstract View - "async executeViewScript(){}" and add it to all other views that are based on the abstract View, so I now just can call the "async executeViewScript(){}" after the async getHtml(){} in the Client router.

Abstract View:

// Class ###########################################################>
export default class{

    // Constructor =================================================>
    constructor()
    {
       
    }


    // Set Title ====================================================>
    setTitle(title) {
        document.title = title;
    }
    

    // Get Html ====================================================>
    async getHtml()
    {
        return "";
    }



    // View Script ====================================================>
    async executeViewScript() // !!! The fix 
    {
    }

}

Index.js - Client Router:

// Imports
import Dashboard from "./views/Dashboard.js";
import Posts from "./views/Posts.js";
import Settings from "./views/Settings.js";
import Register from "./views/Register.js";
import Login from "./views/Login.js";
import Profile from "./views/Profile.js";


// Navigator--------------------------------------------------------------------------------->
const navigateTo = url => {
  history.pushState(null, null, url); // Add the url to the history APi of Js
  router();
};

                       

// Router------------------------------------------------------------------------------------>
const router = async () => {
 const routes = [
   {path: "/", view: Dashboard}, // On Path "/" use the dashboard class and inject html in the #app div
   {path: "/posts", view: Posts },
   {path: "/settings", view: Settings },
   {path: "/Register", view: Register },
   {path: "/Login", view: Login },
   {path: "/Profile", view: Profile }
 ];

 

 

 // Test each route for potential match ----------------------------------------------------->
 // Get the current Url and check if its defined in routes method "Check if its one of our Spa Urls" ----------------------------------------------------->
 const potentialMatches = routes.map(route => {
  return {
      route: route,
      isMatch: location.pathname === route.path  // true if match else false
  };
 });




// Check if there is Match------------------------------------------------------------------->
    let match = potentialMatches.find(potentialMatch => potentialMatch.isMatch);  // Get isMatch from potentialMatches


 // If no match return to StartPage
 if(!match)
 {
     match = {
     route: routes[0],
     isMatch: true
     };
 }

 const view = new match.route.view(); // If match  use the routes array of the router and get the view function for the route

 document.querySelector("#app").innerHTML = await view.getHtml();  // Get the #app div and use the view function to inject Html in it from the view class ex."Dashboard, Posts, Settings etc."
    await view.executeViewScript(); // !!! The fix - THIS is the script that executes exactly after the inserted HTML-
};





// On-Navigating-Back&Forth-Load the Content--Together with the url------------------------------------------------------------------------------------>
window.addEventListener("popstate", router); // On popstate "If back button is pressed" use the router array to load back the previeous SPA View


// Listen to document fully Loaded
document.addEventListener("DOMContentLoaded", () => {
  document.body.addEventListener("click", e => { //Listen for click in the body
    if(e.target.matches("[data-link]")){  // If body item was clicked and its data-link decorated
      e.preventDefault();  // Prevent deafult behavior dont follow the link
      navigateTo(e.target.href);  // Navigate method   
    }
  });


router(); // Load the content if the url is defined in our "Spa Urls"
});

//#### Client Routing END #####

Vanilla JS SPA - How to load specific scripts under the inserted html of the SPA View

Answers (2)

Related Questions