I have the following template:
<!DOCTYPE HTML>
<html>
<head>
<link href="css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/libs-0001.js" async="async"></script>
<script type="text/javascript" src="/js/app-0004.js" async="async"></script>
<script>
var name = {literal}<%= name %>{/literal};
var version = {literal}<%= version %>{/literal}};
</script>
</head><body></body></html>
Like in smarty, from php, I want to use {literal} declarations in the template, under the script session.
How to do this in locomotivejs views?
As far as I understand {literal}/{/literal}, everything between those tags isn't interpreted. EJS templates don't have something similar, although there are ways of circumventing that.
One way is to configure EJS to use different open/close tags, described here.
Another way is to use a different templating engine altogether, which isn't too difficult since LocomotiveJS isn't hardcoded to using EJS templates. I like the Swig templating engine myself, which has the {% raw %} tag that seems to do the same as {literal}.
Related
I am using Express-Handlebars as my templating engine and I use a layout for all my views. However, I want to be able to add scripts via the view for specific pages. Very much like in this example: is there a way to add CSS/JS later using EJS with nodejs/express
I want to add my scripts after the standard scripts that are used for all pages(bootstrap, jquery). These are placed at the bottom of body in my layout, like so:
<html>
<header>
...
</header>
<body>
...
{{{body}}}
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
How would I go about doing this using Handlebars? Or is my best bet to use EJS? Or can I use both?
Any help is much appreciated,
Freece
Never mind! I realized that that method would contradict the foundations of Handlebars. Instead I added the following to my controller:
var scripts = [{ script: '/js/myTestScript.js' }];
...
res.render('contact', { title: 'Kontakt', scripts: scripts });
And in my layout it looks like this:
...
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
{{#each scripts}}
<script src="{{script}}"></script>
{{/each}}
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.
I'm using the linkedIn fork of Dust with Node.JS & Express.
My template hierarchy is having:
1 layout template - The base template
1 Page template - This is the template that will be rendered
Optional number of partials - Might be included by the page template
layout.dust (layout template):
<html>
<head>
<script src="/js/layout.js"></script>
<link rel="stylesheet" href="/css/layout.css">
<script src="/js/home.js"></script>
<link rel="stylesheet" href="/css/home.css">
<script src="/js/sidebar.js"></script>
<link rel="stylesheet" href="/css/sidebar.css">
<script src="/js/widget.js"></script>
<link rel="stylesheet" href="/css/widget.css">
</head>
<body>
{+content}{/content}
</body>
</html>
home.dust (page template):
{>layout/}
{<content}
<div>
{>sidebar/}
</div>
<div>
{>widget/}
</div>
{/content}
When the user visits the website homepage, then home.dust will be rendered, and the user will see a page with the sidebar and some widget. The content of sidebar.dust and widget.dust is irrelevant.
As you can see in layout.dust, there are 4 sets of JavaScript and CSS included in the head section, one for each of the templates and partials. My problem is finding a way to automatically include each asset into the layout (without hardcoding). Ideally I would like to be able to just do this:
{#scripts}
<script src="{.}"></script>
{/scripts}
Different pages may require different assets.
How can I push each script source path into the context of layout.dust?
What do other developers do, do they just hardcode them?
I'd be adding all scripts to the head of the layout without pushing any from the pages that extend from this layout. I'm not sure how knowledgeable you are on javascript minification but it's common practice to bundle all (or most) of your javascript assets into one file and serve them up to the user with a single HTTP request. This speeds up your page a lot; checkout what Google has to say about it here.
It's not hard because there are a few tools to do this for you automatically. You could go for an asset manager or Grunt.
ASSET MANAGER:
There are a few on npm. I found one called Express Asset Manager and another called Asset Pipeline.
GRUNT:
Use contrib-uglify and contrib-concat to handle you minification. There are plenty of others that you should find useful. You can do the exact same thing with all of your CSS too.
Obviously in development you don't really want to try to debug minified code so you can do something like the following:
{?production}
<script src="production-minified-script.js"></script>
{:else}
{#scripts}
<script src="{.}"></script>
{/scripts}
{/production}
where production is a variable passed to your template from process.env.NODE_ENV. To avoid manually adding in each script, you could pass them in as an array by
STILL WANT TO ADD FROM OTHER PAGES?
If you still want to add from other pages, add in a block to your head below your main scripts, something like:
{+otherScripts}{/otherScripts}
I'm trying to learn how to use Snap and Heist and wanted to put links to JavaScript libraries in on place. I created this template in _js-libs.tpl:
<bind tag="jquery">
<script type="text/javascript" src="/js/jquery-2.1.0.js"></script>
</bind>
<bind tag="d3js">
<script type="text/javascript" src="/js/d3.js"></script>
</bind>
And then tried this in the base.tpl template:
<html>
<head>
<title>Snap web server</title>
<link rel="stylesheet" type="text/css" href="/screen.css"/>
<apply template="_js-libs"/>
<jquery/>
<d3js/>
</head>
... snip ...
But this just resulted in <jquery></jquery> and <d3js></d3js> in the page. I take it bind tags are not visible in a template which has applied the template containing the bind. How do I create top level tags like this in templates? I can only find examples of creating top level tags in Haskell code.
The bind tag only works locally to a template. The only exception to this is if you use bind tags inside the body of an apply tag as a mechanism to pass named "parameters" to the applied template.
I am new to meteor and I am trying to do multi-page application where http://www.mydomain.com/page1 will result a totally different page from http://www.mydomain.com/page2.
By totally different I mean that I don't want the page to be rendered by the client.
I tried to use meteor-router but What I got is something like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/myapp.css?9297ad4aa173c4e0c19aebd27c62a5c43242bb93">
<script type="text/javascript">
__meteor_runtime_config__ = {"ROOT_URL":"http://localhost:3000","serverId":"iMp4kgzzeqDtktJoY"};
</script>
<script type="text/javascript" src="/packages/underscore/underscore.js?6d71e6711255f43c0de8090f2c8b9f60534a699b"></script>
<script type="text/javascript" src="/packages/meteor/client_environment.js?07a7cfbe7a2389cf9855c7db833f12202a656c6b"></script>
<script type="text/javascript" src="/packages/meteor/helpers.js?2968aa157e0a16667da224b8aa48edb17fbccf7c"></script>
...
...MANY MANY MANY SCRIPTS.... ?!?
...
...
<script type="text/javascript" src="/myapp.js?2866dcdb5c828b129cdd3b2498a4bf65da9ea43f"></script>
<title>myapp</title>
</head>
<body>
</body>
</html>
And this is not what I want. I want page1 route will return me:
<!DOCTYPE html>
<html>
<head>
My meta tags
</head>
<body>
page1
</body>
</html>
And I want page2 to return different meta tags with different content.
In order to be clear, lets assume that my clients sometime doesn't have javascript. I don't asking about whether meteor is the right framework! I am asking only if can I do this with meteor.
Meteor works a bit different compared to the traditional LAMP stack. Basically it works by patching out the DOM to only where the changes are needed as opposed to re-downloading the whole web page. It makes for a very satisfying end user experience on modern web browsers.
To use meteor router you need to find a spot that you want to patch out with new data for different pages with {{renderPage}}. You can use something like
<head>
<title>xx</title>
</head>
<body>
{{renderPage}}
</body>
<template name="page1">
<h2>Hello!</h2>
</template>
<template name="page2">
<h2>Ola!</h2>
</template>
Now you need to define a router in your client side javascript:
Meteor.Router.add({
'/page1': 'page1',
'/page2': 'page2'
});
So if you load /page1 you would see Hello! and if you load /page2 you would see Ola! as defined in the <template name="page2">..</template>
With the meta tags you need to use javascript to create them. With something like
$('head').append("<meta...");
Again this depends on your preference, personally I find these type of apps load ridiculously fast between web pages as compared to other 'thin' based websites. (Have a look at meteor.com to see how fast you can swap between the pages). The browser does need javascript, however.
Of note is in production mode there will only be 1 script tag.