I am using Handlebars in an Express Node.js app. My layout.html file includes a <head> section. How can I make the <head> section different for different pages? (So that I can, for example, reference a JavaScript file in only one page, and vary the <title> for each page.)
layout.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='/public/ajsfile.js'></script>
<link type='text/css' href="/public/style.css" rel="stylesheet">
</head>
<body>
{{{body}}}
</body>
</html>
(I am imagining varying the <head> content with something analogous to {{{body}}} in the above, but with {{{head}}}.)
This is a great question and, in my mind, a glaring weakness in Express's view model. Fortunately, there is a solution: use Handlebars block helpers. Here's the helper I use for this purpose:
helpers: {
section: function(name, options){
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
Then, in your layout, you can do the following:
<head>
{{{_sections.head}}}
</head>
<body>
{{{body}}}
</body>
And in your view:
{{#section 'head'}}
<!-- stuff that goes in head...example: -->
<meta name="robots" content="noindex">
{{/section}}
<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
You can make the follow:
layout.hbs
<head>
<title>{{title}}</title>
{{#each css}}
<link rel="stylesheet" href="/css/{{this}}" />
{{/each}}
</head>
app.js
router.get('/', function (req, res, next) {
res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});
Result:
<head>
<title>MyApp</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/custom.css" />
</head>
Maybe, you could use this implementation of the section helper: https://github.com/cyberxander90/express-handlebars-sections
You just need to install it and enable it:
yarn add express-handlebars-sections # or npm
const expressHandlebarsSections = require('express-handlebars-sections');
app.engine('handlebars', expressHandlebars({
section: expressHandlebarsSections()
}));
Hope it helps.
Younes
I know this is an older question but I wanted to point out a clear alternative solution to what you are asking (I'm not entirely sure why nobody else spoke about it over the years). You actually had the answer you were looking for when you bring up placing things in {{{head}}} like you do for {{{body}}}, but I guess you needed help understanding how to make it work.
It seems possible that most of the answers on this page are geared towards Node "Sections" because you speak about the different sections of HTML you've included in your layout file that you want to change. The "Sections" everyone is speaking about in this thread seems to be a technique, although I may be mistaken, originating from Microsoft's Razor Template Engine. More info: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm
Anyway Sections work for your question, and so could "Partials" theoretically (although it may not actually be the best option for this). More info on Partials:
https://www.npmjs.com/package/express-partial
However, you simply asked for a way to alter the HTML tag content of your template layout in Handlebars, and assuming we are talking about HTML head tags, all you need to do is replace the content you have in your template layout HTML head tags with one of these (I use 3 brackets because it seems HTML would be included and you don't want it escaped):
<head>
{{{headContent}}}
</head>
Then you just dynamically pass whatever data you want through the route you create in your app.js file to "get" the page like so (I am mostly taking the code #Fabricio already provided so I didn't have to rewrite this):
router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});
Now when you load your page, "I DID IT!" will be where you expect it to show up.
Related
I am trying to use peerjs in vue app. So I added the cdn script in vue index.html file's header like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1.0">
<title>peer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.9/peer.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Now in a components' mounted hook, I am doing this to just console the id
var peer1 = new Peer();
peer1.on('open', function(id) {
console.log('My peer1 ID is: ' + id);
});
Nothing happens.
I then created a simple html file and run that html file I was able to see the id.
Next I tired to see XHR tab, I see when running a plain html file, two ajax calls is sent and in the result an ID is returned. But in vue, there is nothing like this. All I get a socket that returns this values
{websocket: true, origins: ["*:*"], cookie_needed: false, entropy: 1058218289}
cookie_needed
:
false
entropy
:
1058218289
origins
:
[":"]
websocket
:
true
One more thing, peers js documentations says to use api key, but if I use api key nothing happens in vue or html. Without the key, in html file I get the id.
Anyone knows please help me. Thank you.
I have two Marko components that I'd like to include in other components whenever they render on an Express server: <main-header/> and <main-footer />.
components/main-header/index.marko is as follows:
<lasso-page />
<!DOCTYPE html>
<html>
<head>
<lasso-head />
</head>
<body>
<nav>...</nav>
And components/main-footer/index.marko is:
<footer>...</footer>
<lasso-body />
</body>
</html>
The page I want to render on a certain route would look like:
<main-header />
//component content
<main-footer />
However, I get an error of Missing ending "body" tag for main-header, so obviously this kind of EJS-partials like syntax isn't allowed. Is there a better way to do this without having a single index.marko file that is rendered in every route handler?
Here's the docs on using layouts:
https://markojs.com/docs/core-tags/#layouts-with-nested-attributes
The docs mention using #tags which allow passing named content chunks (if you wanted to put some stuff into <head> and other stuff into <body>), but if you only have a single content chunk to pass, you can use the default content.
You can create a layout that uses the <include> tag to render content passed to it:
<html>
<body>
<include(input.renderBody)/>
</body>
</html>
Then use the layout, passing body content:
<custom-layout>
Content goes here
</custom-layout>
Before Famo.us completely changed their architecture I was developing some Apps using Famo.us, RequireJS, EJS Templates, Node and some other stuff.
But now when I come to replace the old Famo.us architecture with the new Famo.us 'Engine' I am getting errors - which tells me the architecture is wrong for the new approach - so wondered if you guys can help me.
Background
Server is Node.js, Express 4 and some other stuff
Client will be Famo.us, EJS Templates and some other stuff
The current approach is that the '/' Router calls an 'ejs' template.
index.ejs:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="/css/famous.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<script data-main="/js/webmain.js" src="/js/vendor/requirejs/require.js"></script>
</body>
</html>
This worked fine with old Famo.us architecture...and would call the webmain.js script using RequireJS.
webmain.js:
/* globals require */
require.config({
baseUrl: "js",
nodeRequire: require,
paths: {
"famous": "vendor/famous",
"famous-flex": "vendor/famous-flex/src",
json2: "vendor/json2",
"requirejs": "vendor/requirejs/require",
"socketcluster": "vendor/socketcluster",
"ua-parser" : "vendor/ua-parser.min",
"uuid": "vendor/uuid"
}
});
require(["platform"]);
The 'platform.js' script would contain the following:
define('platform', function(require, exports, module) {
'use strict';
var Engine = require("famous/core/Engine");
var contentContext = Engine.createContext();
var Widget = require('app/widgets/DefaultWidget');
var mainView = new Widget();
var contextSize = [undefined, undefined];
contentContext.setPerspective(1);
Engine.nextTick(function() {
contextSize = contentContext.getSize();
mainView.setOptions({size: [contextSize[0], contextSize[1]]});
contentContext.add(mainView);
});
contentContext.on('resize', function(e) {
contextSize = contentContext.getSize();
if (mainView) mainView.setOptions({size: [contextSize[0]*1, contextSize[1]*1]});
}.bind(this));
});
But the new version of Famo.us will not work using this approach and I wanted to ask your thoughts as to why, or if there was another way they have not mentioned?
I have updated the Famou.us source code in 'vendor/famous' to use the 'Famo.us Engine' code from github. If I replace the old Famo.us code in the 'platform.js' script with new Famo.us code - like this:
define('platform', function(require, exports, module) {
'use strict';
var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');
FamousEngine.init();
var scene = FamousEngine.createScene();
var node = scene.addChild();
var domEl = new DOMElement(node, {
content: 'Hello World',
properties: {
fontFamily: 'Arial'
}
});
});
I get the following errors:
Uncaught Error: Module name "Clock" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught Error: Module name "../utilities/CallbackStore" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught TypeError: Cannot read property 'init' of undefined platform.js:28
I guess I am trying to understand, when the RequireJS skeleton is pretty much the same, why it doesn't work? Why Famo.us is undefined, and why the new Famo.us architecture can break so much - and what the 'new' way of integrating famo.us would be?
I have asked questions on their 'slack' IRC but it doesn't seem to be a way to get answers and a really poor 'help'.
Any help would be greatly appreciated as I am really stuck from moving forward at the moment.
Thanks again.
Famo.us version 0.3.5 and earlier used RequireJS using AMD.
The new version 0.5.0+ uses the node.js flavor of CommonJS and uses Browserify to build a bundle of your javascript application for the browser.
The following from an Answer in this question sums it up. More about their similarities and differences in the answers.
RequireJS implements the AMD API (source).
CommonJS is a way of defining modules with the help of an exports object, that defines the module contents.
I am writing a JSP that displays a list of clubs in a grid. The grid shows the name of the club together with its latitude, longitude, website and description.
The actual data to be displayed is stored in a variable (a dojo.data.ItemFileWriteStore) called clubStore.
When the page is loaded, a call is made to a servlet to retrieve the data. The handling function then deletes all the items held in the store and adds new items returned by the servlet.
The JSP code is shown below:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clubs</title>
<style type="text/css">
#import "./dojoroot/dojo/resources/dojo.css";
#import "./dojoroot/dijit/themes/tundra/tundra.css";
#import "./dojoroot/dojox/grid/resources/Grid.css";
#import "./dojoroot/dojox/grid/resources/nihiloGrid.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false">
</script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
var clubData={
items:[{name:'No Clubs', lat:'---', lon:'---', webSite:'---', description:'---'}]
};
var layoutClub=[{field:"name", name:"Name", width:10},
{field:"lat", name:"Lat", width:5},
{field:"lon", name:"Long", width:5},
{field:"webSite", name:"Web Site", width:10},
{field:"description", name:"Description", width:'auto'}];
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
</script>
<link rel="stylesheet" href="dojoroot/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="dojoroot/dojox/widget/Dialog/Dialog.css" />
</head>
<body class="tundra">
<%#include file="header.jsp"%>
<div id="clubGrid"
style="width: 800px;"
autoHeight="true"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:clubStore,
structure:layoutClub,
query:{},
queryOptions:{'deep':true},
rowsPerPage:40">
</div>
<br>
<script>
var urlString="http://localhost:8080/BasicWeb/ClubsServlet";
dojo.xhrGet({
url: urlString,
handleAs: "text",
load: function(data) {
// remove items...
var allData=clubStore._arrayOfAllItems;
for (i=0; i<allData.length; i++) {
if (allData[i]!=null) {
clubStore.deleteItem(allData[i]);
}
}
var jsonClubArray=JSON.parse(data);
for (var i=0; i<jsonClubArray.clubs.length; i++) {
var club=jsonClubArray.clubs[i];
var newClub={name: club.clubname, lat:club.lat, lon:club.lon, webSite: club.website, description: club.description};
clubStore.newItem(newClub);
}
clubStore.save();
}
});
</script>
</body>
</html>
The script to process the servlet response sometimes fails because clubStore is undefined (debugging using Firebug). This does seem to be a spurious fault as some times everything works perfectly.
Any assistance in understanding how to define the clubStore variable would be appreciated.
Thanks.
James.
I think what might be happening is the body script is sometimes running before the head script, so it is kind of a race condition. You could try wrapping your body script into a dojo.ready. (I assume from your code that you are using dojo 1.6 or earlier since you are not using the AMD loader style.)
dojo.ready(function(){
// Put your xhr request code here.
});
You may also want to try testing with a firebug breakpoint in the head and body script. See if the head is sometimes running first.
So the problem turned out to be a syntax error in the declaration - missing '{' in the line
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
The spurious aspect to the fault was a red herring - I had previously declared the variable as part of the DOM object and that caused a spurious fault. So I messed up my regression testing as well as introducing a syntax error!
Thanks.
James.
You could try switching the order of your require statements, so it's like this:
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
If that fails, you could set parseOnLoad to false, and then call dojo.parser.parse() after your store has been instantiated like so:
(assuming you are using dojo 1.6 or earlier based on your code)
dojo.addOnLoad(function() {
dojo.parser.parse();
});
Put your clubStore in the global space... just remove the var keyword in front of it...
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.