I'm using ejs in backend with nodejs.
I'd like to pass variable when include. When include the header, pass the page title.
index.ejs:
<% include header %>
<body> . . . </body>
<% include footer%>
header.ejs:
<html lang="en">
<head>
<title><%- my_tytle %></title>
</head>
footer.ejs:
</html>
How to pass my_title in the include command?
You can pass the object inside the include statement
<%- include("header",{title:"your_title"}) %>
you can pass my_tytle directly to the index.ejs and if there is a partial view for header, my_tytle should be accessible to the header.
for example:
index.ejs:
<% include header %>
<body> . . . </body>
<% include footer%>
header.ejs:
<html lang="en">
<head>
<title><%- my_tytle %></title>
</head>
now from node server if you pass the value for my_tytle to index.ejs, like this:
res.render('template_file.js', {
my_tytle : "Value for your title"
});
then your partial view (i.e header in your case) would be also able to access that variable.
As asked somewhere in the comments, we can also use a variable to be controled by a server, and here is how:
<%- include("header",{my_tytle :`${myVar}`}) %>
<%- include("header", locals) %>
All variables that are accessible in index will also be available in header.
Related
How can I add oncopy="return false;" into html <body> in Yii2
body is initialized with the help of $this->beginBody(), how to add some values in?
in the end it should be <body oncopy="return false;">
I am new playwork. I have been going through the tutorials and samples provided the playframework.
I could successfully render helloworld application provided by playframework samples.
I have few doubts regarding the rendering part of main.scala.html.#
This is the default program which I got from samples/helloworld
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
</head>
<body>
<header>
#title
</header>
<section>
#content
</section>
</body>
</html>
Here when I commented out the #content under section tag , I am not able to see the the fields.
Now my question is, where is #content is mapped to the Form field?
I created another structure for my layout and added the #content to the content section. but it does not fit into that
so now my question is #content where is that defined that it is div container and has got some height and weight and all?
I could not understand. Please help me.
Pleae find my customized code below
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
#content</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</body>
</html>
Introduction
From Template parameters in the Play Template documentation, the meaning of the first line is described. Here, we see that two parameter groups are required.
The two parameter groups are:
a String parameter containing the title
a Html parameter containing some HTML content
Usage
To use this template, two parameter groups have to be supplied. In the context of the helloworld application, it is called from app/views/index.scala.html like this:
#main(title = "The 'helloworld' application") {
<h1>Configure your 'Hello world':</h1>
... more HTML elided
}
This pattern is described in http://www.playframework.com/documentation/2.2.x/ScalaTemplateUseCases, where HTML is injected into a template.
main.scala.html contains the template (content contains the HTML to be injected).
index.scala.html contains an example of injection into this template.
Note that calling #main(...) calls the template that is defined in main.scala.html.Similarly, calling #my_template(...) would call the template defined in my_template.scala.html.
In this case, the HTML for the form is defined inside index.scala.html.
Calling the Template
Finally, the root template is called from a controller. For the helloworld application, the template defined in index.scala.html is invoked by the code
def index = Action {
Ok(html.index(helloForm))
}
This is where the form object is injected into the template.
I'm following a beginner's tutorial at http://www.tutorialspoint.com/gwt/gwt_style_with_css.htm.
The code for the HelloWorld.html file is:
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id="mytext"><h1>Hello, World!</h1></div>
<div id="gwtGreenButton"></div>
<div id="gwtRedButton"></div>
</body>
</html>
In the HelloWorld.java (extending EntryPoint), I have:
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
The 2 lines: RootPanel.get() always result in null. I don't know what happen, what to check? (too bad the site doesn't have a comment/discussion section)
Thanks.
Docs says
RootPanel.get(java.lang.String id)
Gets the root panel associated with a given browser element.
DOM.getElementById(java.lang.String)
Gets the element associated with the given unique id within the entire document.
Try with
com.google.gwt.user.client.DOM.getElementById("gwtGreenButton");
com.google.gwt.user.client.DOM.getElementById("gwtRedButton");
Is it possible to dynamically switch the title of a page that is served by Lift without having to write an extra snippet for that particular case?
One option is of course <lift:mySnippet><title>Default Title</title></lift:mySnippet> but I thought there might be an option along the lines of <head_merge><title>New Title</title></head_merge> (which inserts a second title node).
I do not like the first approach since I do not want to stick all the title generation logic into a single snippet and ask what kind of page I am on etc.
Have you tried to use templates?
You can define template in templates-hidden/default.html like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
<head>
<title>
<lift:bind name="title" />
</title>
...
</head>
<body>
<lift:bind name="content" />
</body>
</html>
And use it in index.html for example:
<lift:surround with="default">
<lift:bind-at name="title">Home</lift:bind-at>
<lift:bind-at name="content">
my content
</lift:bind-at>
</lift:surround>
You can find more information about templates here:
http://www.assembla.com/spaces/liftweb/wiki?id=liftweb&wiki_id=Templates_and_Binding
One way is to use the Menu.title snippet.
In bootstrap/liftweb/Boot.scala you define the sitemap with page names:
class Boot {
def boot {
// ...
def sitemap = SiteMap(
Menu.i("Home") / "index",
Menu.i("About") / "about")
// ...
}
}
In templates-hidden/default.html you use the snippet:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
<head>
...
<title class="lift:Menu.title">AppName:</title>
...
Then page titles will be: "AppName: Home" and "AppName: About". This is nice if you use
<span class="lift:Menu.builder"></span>
to build the menu, because page titles will be the same used in the menu.
Another approach is to use head merge and define the title in the page's html. For this to work, you have to remove the <title> tag from templates-hidden/default.html and put an <head> or <head_merge> tag in your content block:
<!DOCTYPE html>
<html>
<body class="lift:content_id=main">
<div id="main" class="lift:surround?with=default;at=content">
<head_merge>
<title>TITLE OF THIS PAGE HERE</title>
</head_merge>
...
In the main kid template file, I want it to have only div tags, each of which do only call a rendered kid file and paste content inside it. (like "include" function in php) but I don't know how to do this. Does someone have any ideas about it?
If you swap to genshi instead of the default kid you can do this with an include tag:
<xi:include href="menu.html" />
Swapping to genshi is fairly easy, I think its a matter of confuration only. The templates tags works otherwise the same. You should rename the extensions from .kid to .html though.
You can first define a "base_layout.kid" template:
<html xmlns:py="http://purl.org/kid/ns#">
<head>
<title>App Name - ${page_title}</title>
<link href="layout.css" type="text/css" rel="stylesheet" />
${page_specific_css()}
</head>
<body>
<h1>Now viewing: ${page_title} of App Name</h1>
<content>Default content</content>
<div class="footer">Page Footer Text</div>
</body>
</html>
Then replace the "content" tag in "page.kid" with whatever data you want:
<html py:layout="'base_layout.kid'"
xmlns:py="http://purl.org/kid/ns#">
<link py:def="page_specific_css()"
href="layout.css" type="text/css" rel="stylesheet" />
<div py:match="item.tag == 'content'">
<ul>
<li>Content Item 1</li>
<li>Content Item 2</li>
<li>Content Item 3</li>
</ul>
</div>
</html>
You can check whether you get the correct html in python shell (after removing all the identifiers used):
>>> import kid
>>> t = kid.Template("page.kid")
>>> print t.serialize()