Using component dynamically for different views - javascript

What I want to achieve is the following:
I have a Layout with the following parts:
Header
Main (here various views are loaded based on the route where you are, in this example just Account.vue)
Footer
Example route: localhost:8080/account (It will load: Account.vue)
In this route I want to load a component called: Section.vue. This will be html code with various DIV blocks: a header, content and footer structure.
<template>
<div class="header">{{ Title }}</div>
<div class="main">{{ Form or anything else }}</main>
<div class="footer">{{ Save Button }}</footer>
</template>
My idea is to be able to manage this block in 1 place in terms of styling. (So in Section.vue). So if I make an adjustment in terms of design, everything will be applied immediately where Secton.vue is loaded. This saves me a lot of work. I want to dynamically supplement the content of this block with Account.vue with a title in the header. In the content a form with various fields and in the footer a save button.
The only problem I run into now. Where do I start to get this done?
I want to load Section.vue getting loaded into Account.vue as I need it there and want to fill this component with some header, content en footer things which are nessecary for the view of Account.vue

Your question is not very clear, but if I understand you correctly maybe vue slot will help you achieve your goal.
Here is the docs: https://v2.vuejs.org/v2/guide/components-slots.html

Related

Using a single layout template for React pages?

I am just beginner in Reactjs and trying to use single layout components e.g. NavBar, MainContent and Footer. However, I am not sure how should I define properly. There are several options:
index.html
index.js
App.js
On the other hand, for Login page I want to use another template which has neither NavBar nor Footer. So, How should I define such a layout pages properly? Could you just give a basic and proper example? I implemented all layout seperately, just need the proper places implementations.
enter image description here

Angular: How to do the Components Architecture the right way?

I'm currently trying to create a Angular-Webpage for a Uni-Project. Therefore i've built up a Webshop-MockUp with several different Pages like
Startscreen
Productscreen
Register/Loginscreen
Shopping-Cart Screen
Order-Screen
and Profile-Screen.
But as I'm now trying to develop the Webshop with Angular, I'm not quite sure, how the Architecture of the Component-Concept of Angular will fit to my needs.
As long as I understand for now it's working like that:
You create a Page with several (reusable) Components which all define different areas of one page.
For the example of the Startscreen, i've created the components:
hero-banner
header
filtering
product-overview
shopping-cart (will be shown on the right side)
These 5 Components can then be added to the app.components.html to show the first page.
But now I have no idea, how to create the other 5 pages and display them inside the app.component.
I've heard about the Routing to switch between components..
But does that mean I have to create one parent-component for every page where I tipe in these different components I've been creating?
And if so, what do I write into the app.component.html if I can Route between the different components anyways?
I just got a big knot in the head right now and I really hope you can help me out here!
Thanks in Advance!
Yep parent component for each page to act as manager component to talk to services, get data, and pass it down to dumb components and handle events from child components. Make your children dumb. This is known as container-component.
Yep learn routing. Also lazy load whenever you can but you can refactor this in later.
<router-outlet></router-outlet> goes in app.component.html.
Possibly something like
<app-navbar>
Text to display via ng-content
</app-navbar> <!-- Common to all routes/pages --!>
<router-outlet></router-outlet>

Show HTML elements on demand with JavaScript

TL;DR : I'm trying to find a way to handle HTML injections into the DOM to avoid having to include irrelevant code in the DOM at all times.
I have a large PHP application that has several forms and modals through out the pages of the application. I'm trying to find a way to lessen the DOM elements by only showing/adding elements as and when they're needed.
What I have so far looks something like this:
<body>
<!-- Page Content -->
<main>
Click to access modal
</main>
<!-- / Page Content -->
<div class="modalContainer">
<div class="modal" id="modal-login">
<!-- modal content -->
</div>
<div class="modal" id="modal-register">
<!-- modal content -->
</div>
<div class="modal" id="modal-forgotpassword">
<!-- modal content -->
</div>
</div>
</body>
In the above, when someone clicks the anchor, you'd see the appropriate modal pop-up. Once you're done with the modal, it hides away until someone needs it again.
My problem with this is that it would mean that every modal needed in the application would always be a part of the DOM regardless of whether it is needed or not.
I wanted to know if there is any way of making this process a little more dynamic? This would involve the user clicking the anchor, and the JS code injecting the Modal into the page, and when done, removing the entire modal code from the page.
I assume this would greatly improve load times and render time.
The problem is that I have been unable to understand the logic behind it, I have been doing something very similar with other parts of the project but I have not been able to apply it to the modals. Here's what I assumed would be the jQuery code for injecting the modal
$('.ismodal').click(function(event) {
event.preventDefault();
let modal = $(this).data('modal'),
elem = '#modal' + modal;
// Check if element already exists
if ($(elem).length) {
$(elem).fadeIn();
} else {
// Get element code
let elementCode = functionToGetElementCode(modal);
// Inject element
$('#modalContainer').append(elementCode);
// Fade In element
$(elem).fadeIn();
}
});
I haven't tried the above code, but I would assume something like the above should work. However, my concern is how I could code the functionToGetElementCode such that it would work, and is not terrible difficult to maintain.
I assume the easiest method would be to have the function in which we could have a switch function that would filter out the needed code. But is there a way to import the template of each modal from a folder? Something similar to the include function in PHP?
Use the <template> tag
In html there is a specific tag designed for this use, it's called <template>. You can use this tag to store your modals and then render them as needed. You're on the right track but I think there is some confusion about how loading works on the web.
JS code injecting the Modal into the page ... I assume this would greatly improve load times and render time.
When you think about load times remember the fastest thing to load is plain text. It can be extremely fast and is very very lightweight. JS, on the other hand, will need to be loaded, run, and not error out
Using AJAX (Not recommended)
If you expect the modal to be infrequently clicked, you could store it in another file and summon it via AJAX. This isn't very advantageous as it will add a network request and processing time to your modal click.
You can use AJAX calls to get the required modal.

What is the best way to ensure a component's client lib files only load on the page when the component is present?

I'm new to AEM. Currently we have one template for each page on our site. All components have the category "project_name.components" and I am calling the client libs in a header file with:
<sly data-sly-call="${clientLib.css # categories='project_name.components'}" />
<sly data-sly-call="${clientLib.js # categories='project_name.components'}" />
However, I have a breadcrumbs component that isn't on every page, but, as expected, the client libs files for it are showing up regardless and causing some issues with the existing default breadcrumbs's styles/scripts.
I have given the new breadcrumb component a test category name of "project_name.breadcrumbs". Is there a way to use this category name in some type of an if/else statement in the same header file that will only call the breadcrumb client lib files if the breadcrumb has been dragged onto the page?
A few thoughts:
The easiest way is to include the client library as part of the component that uses it rather than including it somewhere else. The downside of this is that the CSS you may want to load early in the HEAD section of a page won't be present until somewhere in the BODY.
If your CSS styling is impacting things it shouldn't, then the CSS styling needs to have sufficient selectors so that it won't break things to which it shouldn't apply. Perhaps you can add a class to the breadcrumbs and make all the styling only be applied to stuff under a tag that has the class. If you changed the CSS this way, it wouldn't negatively affect pages when they don't use the breadcrumb (though it could have a downside of bloating your page footprint if it isn't something that will be loaded and browser cached to be used in the future).
Otherwise, you could add logic that runs at the page level that will examine the node and see which components are included and then add conditional logic to only add the client library when the page is using the component. But that is more back-end work. So you can add the if/else statement as you suggested, but it is up to you to write the code behind it--there is nothing built-in that will conditionally do that check to my knowledge.

How to maintain state of a layout in jade in node.js

My layout.jade looks like
doctype html
html
body
block menu
block pagecontent
and index.jade has the following code
extends layout
block menu
body
h1 #{menuData}
and somepage.jade has
extends layout
block pagecontent
h3 user demo page
Now the scenario is first time I will load the index page and from then for all the requests i need to change only the only the pagecontent block. Since on the first request i loaded all the menu. So for all the other requests i need to write something like
res.render('somepage')
then it should load the index page with menucontent and this page content. How to do this effectively ?
The idea is like in Asp.net we have a master page and content page. While redirecting we will redirect to child pages with the same loaded master page. I need similar approach.
UPDATE
As mentioned in the answer i can do that way, but say i have twenty pages. So while rendering every page i need to pass the layout with the menuData (may be stored in a variable). Thats fine. But still any other way to do that or is that the only fine way ?
I am very new to nodejs please help me on this.

Categories