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

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.

Related

Using component dynamically for different views

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

Tabbed components in React.js HTML include

I am just currently learning React.js and I am trying to work on a simple project that can have some really heavy body content but I have to keep them in one page, so I chose tabbed components as a possible solution.
So what I'm planning is to put the tab contents into separate HTMLs and just include them into the main page hidden until their tab option is clicked, but does this mean that the HTMLs will only be loaded into the app once the tab option is clicked?
Normally I would think that the separate HTMLs would be loaded at the same time the main page is loaded, but using React.js, maybe the functionality is different?
Can someone please clarify this? Thank you very much!
A single page application is generally "loaded" immediately, and the views change based on interaction. So if you properly set up your layout, the content will be interpreted when you load the page.
What you are calling HTMLs is properly called Components. Everything in React is based on JavaScript. You would store your components in JavaScript files that end in .js not .html, and then a JavaScript function would return your JSX Component as its return value, which will trigger the DOM to reload.

Just adding js script to typo3

I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:

jQueryMobile and javascript file inclusion: potential risks

I have a jQueryMobile application with multiple single-pages, linked together.
Some of these pages use common javascript files. So I currently import those javascripts only within pages that need them. For example:
Page A -> include fileutils.js and has a link to Page B
Page B -> include fileutils.js
The user clicks on Page B from Page A. Is there the risk of importing fileutils.js multiple time and execute its code multiple times too?
Thanks in advance
You don't need to be worry. Let me explain you how jQuery Mobile works.
What you have is called multi HTML page template. In this case only initial HTML can have more then one data-role="page" page inside, every other subsequent page can have only one data-role="page" page inside.
One first page is initialized it is fully loaded into the DOM. That HTML page becomes a skeleton for a future page loading. Because it is fully loaded it can hold more then one data-role="page" page inside.
When next page is initialized jQuery Mobile will strip everything and load only data-role="page" content. Everything else is going to be discarded, including the HEAD content. Even more only first data-role="page" page is going to be loaded, which means you can't have more then one data-role="page" page inside.
This means that if you have a custom javascript inside subsequent pages it must be inside data-role="page" div, otherwise jQuery Mobile will discard it.
This works in case standard AJAX loading is on, which is a default state. If AJAX loading is turned off jQuery Mobile will load pages like they are normal pages and every subsequent page will replace previous page in the DOM.
Regarding your other question, because of this architecture same js files will never initialize more then once. But there's another problem you will need to be careful with event binding. Because of this specific architecture events can be bind more then once. So you will need to use pageinit page event to initialize your javascript per page. There are several more solutions to this problem but I will describe them only if you want.

Phonegap Navigation bar not working for multiple html pages

I am working on multiple HTML page phoneGap application and i want to implement a navigation bar.
I am using the following code for phoneGap navigation bar implementation:
In index.html, I have defined navigation bar like this:
function onDeviceReady() {
plugins.navigationBar.init();
// or .create("BlackOpaque") to apply a certain style
plugins.navigationBar.create("BlackOpaque");
plugins.navigationBar.setTitle("Home");
plugins.navigationBar.hideLeftButton();
plugins.navigationBar.hideRightButton();
plugins.navigationBar.show();
}
When i run app, it creates a nav bar at top of index page with title labelled as HOME, without left or right navBarButton as I don't need it in home page.
But when I go to next HTML page xyz.html by clicking on a button, the navBar show same behaviour: i.e same Title without left and write button.
But I want it to change the title for the currently loaded page and also insert leftNavBarButton label as back so that I can also go back to previous page.
But it is not happening. I have also tried to write a script in xyz.html page that should change its title and put leftNavBarButton as back but not working.
Its static throughout the app with same title and i am unable to go back to previous page. I want its behaviour to be global which changes with every page and maintain the state of previous pages as well! How can i do this?
If you're using a single-page template (= 1 jQuery Mobile page per HTML file), you have to include your JS code in every HTML files.
What you can do is to put all your custom JS code inside a JS file and import it in every HTML pages you have. Also, import any other JS lib you'll use in every pages.
Ex:
<script src="./js/navigationbar.js"</script>
<script src="./js/myjs.js"></script>
...
...
Another solution would be to force the refresh of the pages when navigating to them.
In this case, you don't have to import all your JS code in every pages, and for each HTML file, you can import the JS files which are required for this given file.

Categories