Hello!
Is there any way to have the master page or layout in jshtml?
I tried do this in .net Razor style, but it did't works.
Link to jshtml view engine.
My intention is to have mastarpage lets say is called layout.jshtml and some other subpages like index.jshtml and so on, like it is in razor.
More explanation of what I mean speaking "I would like have masterpage"
I have Layout.jshtml , this is my masterpage
<html>
<head>
<link rel="stylesheet" href="/stylesheets/style.css" ></link>
</head>
<body>
#writeBody();
</body>
</html>
and I have other view called some.jshtml
<h1>#locals.title</h1>
<div class="Mydata">
#locals.content
#locals.otherContent
</div>
When I run this page in browser I would like to have concatenation of layout.jshtml and some.jshtml. The content of some.jshtml is rendered in writeBody(); in layout.jshtml
When I speaking of concatenation I mean someThing like this. This is result that I can see in browser.
<html>
<head>
<link rel="stylesheet" href="/stylesheets/style.css" ></link>
</head>
<body>
<h1>title</h1>
<div class="Mydata">
content
otherContent
</div>
</body>
</html>
The jshtml repo links to the jshtml-express project.
The docs there give an example of how to use this in your project :
var express = require('express');
var port = parseInt(process.argv.pop());
var app = express();
app.configure(function() {
app.use(express.bodyParser());
app.use(app.router);
});
app.engine('jshtml', require('jshtml-express')); // make sure you have installed via npm install jshtml-express
app.set('view engine', 'jshtml');
I have not used this myself, but the process is similar with other templating systems (Jade, Handlebars, etc).
More explanation of what I mean speaking "I would like have masterpage"
I have Layout.jshtml , this is my masterpage
<html>
<head>
<link rel="stylesheet" href="/stylesheets/style.css" ></link>
</head>
<body>
#writeBody();
</body>
</html>
and I have other view called some.jshtml
<h1>#locals.title</h1>
<div class="Mydata">
#locals.content
#locals.otherContent
</div>
When I run this page in browser I would like to have concatenation of layout.jshtml and some.jshtml. The content of some.jshtml is rendered in writeBody(); in layout.jshtml
When I speaking of concatenation I mean someThing like this. This is result that I can see in browser.
<html>
<head>
<link rel="stylesheet" href="/stylesheets/style.css" ></link>
</head>
<body>
<h1>title</h1>
<div class="Mydata">
content
otherContent
</div>
</body>
</html>
Related
I would like to have a text box at the top of my website on every page that has the same text, but I don't want to edit the code individually for every webpage. How would I sync the text to all the webpages?
Include Common files using jQuery...
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="header"></div>
<div id="content">
Main Content
</div>
<script>
jQuery(document).ready(function(){
jQuery("#header").load("header.html");
});
</script>
</body>
</html>
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.
I'm writing a basic Node app and simply want to render the index page with Jade, and then let Angular do the rest on the front-end.
This is the Jade (slightly shortened to illustrate the problem):
doctype html
html
include ../includes/head
body(ng-app="TestApp" ng-controller="TestAppController")
div(ng-view)
include ../includes/foot
Which compiles to the following HTML:
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
<link rel="stylesheet" href="/dist/css/app.css">
</head>
<body ng-app="ExampleApp" ng-controller="ExampleAppController" class="ng-scope">
<!-- ngView: -->
<footer class="page-footer">
<ul class="page-footer-links">
<li>Some Twitter User</li>
</ul>
</footer>
<script src="/dist/js/app.min.js"></script>
</body>
</html>
Notice how div(ng-view) is now an HTML comment within the rendered HTML, rather than a DIV with the directive:
<!-- ngView: -->
Changing div(ng-view) within the Jade to any of the following produced the same result for me:
ng-view
<div ng-view></div>
| <div ng-view></div>
Any ideas as to why this is happening?
This was actually nothing to do with Jade. As stated in a comment by #NikosParaskevopoulos, the <!-- ngView: --> HTML comment is a placeholder created by Angular upon seeing a <div ng-view> and having no route to display in it.
Redefining my Angular routes solved the problem.
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 {