I'm using the sails.js framework
I want to know if there is a way for a view to use only one css file, not the other ones being declared in the layout?
That is, ignore the other css definitions and use only one.
Is that possible?
Yes. Inside of the method that renders your view, return a value that references the stylesheet you want to include.
return res.view('someTemplate',{
myStylesheet: 'link/to/your/stylesheet.css'
})
Then, edit your layout.ejs file to include the stylesheet if our new value is present.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
...
<% if(myStylesheet) { %>
<link rel="stylesheet" href="<%= myStylesheet %>">
<% } %>
<!--STYLES-->
<link rel="stylesheet" href="/some/other/stylesheet.css">
<!--STYLES END-->
...
...
...
The EJS template pre-processor will now only include the stylesheet you specify if a value is provided.
Related
I'm learning nodejs at the moment and my .ejs template files are pretty much standard (header, footer, js-defaults etc) - and the only thing that changes it the content in a HTML div.
I thought I could set a variable in my route and pass it along to the view (like you would a title or another variable), then include it - but it's not working (example below).
In Ruby you can do this with "yield" and I am trying to do the same with EJS.
Thanks for taking the time to read (and please forgive my ignorance in this matter).
Example Route
app.get('/fish', function(req, res) {
res.render('fish' {
title:"Fish",
template:"view/partials/content/fish.ejs"
});
});
Example EJS
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<% include views/partials/template/header.ejs %>
<body>
<div class="container">
<!-- Dynamic content here -->
<% include template %> <!-- tries to load template.ejs %>
</div>
</body>
<% include views/partials/template/footer.ejs %>
<% include views/partials/template/js-defaults.ejs %>
</html>
Looks like this is now supported in EJS. It was introduced in v2.0.1: 2015-01-02. The new syntax looks like this
<!-- Dynamic content here -->
<%- include(template) %>
To get this to work I had to disable caching in Express by setting:
app.set('view cache', false);
Using ufront and erazor I ran into the following problem very quickly.
The hello-world example provides the following layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
#viewContent
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
</html>
For certain pages I want to add more headers or scripts after Jquery has been loaded.
One way to do so (for the scripts for example), would be to pass the scripts as an array of strings, and construct them on the layout file :
...
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
#for(script in scripts) {
<script src='#script.path'></script>
}
</html>
....
The problem with this approach is that I can't keep meaningful headers + body + scripts on the same template file witch would be great, also needs extra care to pass the scripts and headers as context.
Some template engines like Razor or Laravel allow to do that using 'sections'.
Is it possible to do something similar with erazor? If not what would be a good alternative?
I'm looking for alternatives to Jade templates in express 4.x because I really don't like Jade's syntax. I'm tending towards EJS, because it's basically just HTML on steroids.
However, one really nice feature of Jade templates is the ability to use layouts. I've found https://www.npmjs.org/package/express-ejs-layouts, but it seems to be made for express 3 and its build is failing :/.
I also found https://www.npmjs.org/package/ejs-mate which is made for express 4.x but it only seems to support a single content block (body).
I would like to have something like this:
layout.something:
<html>
<head>
<% block styles %>
<% block scripts %>
</head>
<body>
<% block body %>
</body>
</html>
index.html:
uses layout "layout.somehing"
scripts:
<script src="my_custom_script.js"></script>
styles:
<link rel="stylesheet ...></link>
body:
<h1>This is my body!</h1>
So that this yields:
<html>
<head>
<link rel="stylesheet ...></link>
<script src="my_custom_script.js"></script>
</head>
<body>
<h1>This is my body!</h1>
</body>
</html>
Does anyone know an engine that is capable of that besides Jade?
You can try express-handlebars, it supports layout and partial views.
In Jade JS, it's very easy to extend a layout. Supposed one have layout.jade, and for the index.jade, just do:
extend layout
block content // content comes here
Then it's pretty sufficient.
I searched the official guide but didn't found how to do. The most similar seems to be something like:
{>partials}
But still that's not extending a layout. How to achieve similar thing in DustJS?
Thanks a lot.
I found the solution... turns out I didn't read the dust documents careful enough.
Layout File:
<html>
<head>
<title>{+title}Location of Title{/title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
</head>
<body>
<header>
<h1 id="page-title" class="very-middle">{+title}Title Comes Here{/title}</h1>
</header>
<div id="content">
{+content}
Content Comes Here
{/content}
</div>
</body>
</html>
Content File:
{>layout/}
{<content}
{!
Content simply comes here
}
{/content}
So the point is the use of {+placeHolder}, {>toExtend} and {
I am currently playing around with JSFs ClientBehavior API.
I want to create a client behavior that uses jQuery. Besides inclusion of the *.js files for jQuery another script will be required in the <head> section to bootstrap all the jQuery stuff i.e. create client side widgests.
I tried to follow this approach from victor herrera, but the component system event is never processed. I guess this is because ClientBehaviors do not inherit from UIComponent.
So my question is how to add dynamically created JS to the <head> of the rendered document.
This is what the rendered output in the end should look like:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
$(document).ready(function () {
// Dynamically created stuff here
}
</script>
</head>
<body>
...
<input type="text" id="myJSFInputWithClientBehavior" onclick="doSomeStuffWithjQuery()" />
</body>
</html>