I am new to express-handlebars and finding difficulty in understanding it.
my layout
views
-layouts
-mainlayout.hbs
-partials
-header.hbs(it contains main menu)
-footer.hbs
-patialpage.hbs
pagecontent.hbs
my main page
<div>
{{body}}
</div>
this is my partial page
{{>header}}
<div>
<div>Side Bar Menu</div>
<div>Page Content Here</div>
</div>
{{>footer}}
this is my content
<div>This Content to be append in partial page</div>
You just did in the wrong sequence.
You tried to append the page content to a partial.
In the main layout you define the look of your page.
partials are e.g. parts of this layout (e.g. navbar, footer, ...)
Your main could look like:
<div>
{{> header}}
{{body}}
{{> footer}}
</div>
this means: on each side the header and the footer partial will be loaded and in between, inside {{body}} there will be the rendered view.
example of a main.handlebars file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
{{!-- navbar partial --}}
{{> _navbar}}
{{!-- flash messages --}}
{{> _flashmessages}}
{{!-- placeholder for rendered views --}}
{{{body}}}
</body>
</html>
then you can render a view based on this main layout.
example with just a text rendered
// Index Route
app.get('/', (req, res) => {
res.send("Hello world");
});
});
example with the view index.handlebars rendered to the {{body}} part of the page
// Index Route
app.get('/', (req, res) => {
res.render('index');
});
Related
Lets say, I have following layout page tmeplate.html
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
...
<body>
...
<section layout:fragment="custom-content">
DEFAULT CONTENT GOES HERE
</section>
...
</body>
</html>
and my index.html page is like following
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="template">
...
<body>
...
<section layout:fragment="custom-content">
PAGE SPECIFIC CONTENT GOES HERE
</section>
...
</body>
</html>
So, how do I add index.html page specific script tag immediate before the ending body tag?
I am trying to load a dicom image using cornerstone library. I get an error - uncaught exception: loadImage: no image loader for imageId.
I have my image file named as image-1.dcm. What am I doing wrong?
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>
jsminimal/index.html
</h1>
This is an example of the minimal use of cornerstone driven by javascript
<br>
<br>
In this example, javascript is used to image enable a div.
<br>
<br>
<div id="dicomImage" style="width:512px;height:512px;">
</div>
</div>
</body>
<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- include the cornerstone library -->
<script src="cornerstone-master/dist/cornerstone.js"></script>
<!-- include special code for these examples which provides images -->
<script src="cornerstone-master/example/exampleImageIdLoader.js"></script>
<script>
$(document).ready(function() {
var imageId = 'image-1';
var element = document.getElementById('dicomImage');
cornerstone.enable(element);
cornerstone.loadImage(imageId).then(function(image) {
cornerstone.displayImage(element, image);
});
});
</script>
</html>
You need to use the cornerstoneWADOImageLoader to loader DICOM P10:
https://github.com/chafey/cornerstoneWADOImageLoader
All assemble users who uses layouts knows that "{{> body }}" marks the point of insertion of contents of any page who uses the layout. But is it possible to define multiple points of insertions, instead of tossing everything at where the {{> body }} is?
For instance, in my page I would like to define a specific piece of javascript, but I like that custom javascript to be at the very bottom of the page along with out javascript tags. If it only puts everything where the {{> body }} is, this is not possible, since the script will just be appended to the content.
In other words, it would be useful to have {{> script }} or even customizable tags marking different points of insertion, and in the page using the layout, these tags are specifically defined.
Above is my ideal use case, does anyone know if assemble supports anything like this?
#Xavier_Ex check out the assemble handlebars helper repo https://github.com/assemble/example-layout-helpers
And this particular pull request https://github.com/assemble/handlebars-helpers/pull/75
We added some layout helpers about a month ago that allow you to "extend" a layout and include different content sections. Notice that you'll have to include your layout as a partial in the assemble gruntfile setup for this to work properly...
assemble: {
options: {
flatten: true,
assets: 'docs/assets',
partials: ['src/includes/*.hbs', 'src/layouts/*.hbs'],
layout: false,
data: ['src/data/*.{json,yml}', 'package.json']
},
pages: {
src: 'src/*.hbs',
dest: 'docs/'
}
}
Layout (default.hbs)...
<!DOCTYPE html>
<html lang="en">
<head>
{{#block "head"}}
<meta charset="UTF-8">
<title>{{title}} | {{site.title}}</title>
<link rel="stylesheet" href="{{assets}}/{{stylesheet}}.css">
<link rel="stylesheet" href="{{assets}}/github.css">
{{/block}}
</head>
<body {{#is stylesheet "bootstrap"}}style="padding-top: 40px;"{{/is}}>
{{#block "header"}}
{{! Navbar
================================================== }}
{{> navbar }}
{{/block}}
{{! Subhead
================================================== }}
<header class="{{#is stylesheet "bootstrap"}}jumbotron {{/is}}{{#is stylesheet "assemble"}}masthead {{/is}}subhead">
<div class="container">
<div class="row">
<div class="col col-lg-12">
<h1> DOCS / {{#if title}}{{ uppercase title }}{{else}}{{ uppercase basename }}{{/if}} </h1>
</div>
</div>
</div>
</header>
{{! Page content
================================================== }}
{{#block "body"}}
<div class="container">
<div class="panel panel-docs">
{{> body }}
</div>
</div>
{{/block}}
{{#block "script"}}
<script src="{{assets}}/highlight.js"></script>
<script src="{{assets}}/holder.js"></script>
{{/block}}
</body>
</html>
Some page
{{#extend "default"}}
{{#content "head"}}
<link rel="stylesheet" href="assets/css/home.css" />
{{/content}}
{{#content "body"}}
<h2>Welcome Home</h2>
<ul>
{{#items}}
<li>{{.}}</li>
{{/items}}
</ul>
{{/content}}
{{#content "script"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
Hope this helps.
I was implementing handlebar.js for my sample app.As per the handlebar.js documentation, it tried with the example as mentioned. But the values are loaded on the dom inside the script, but not visible on browser.
HTML
<body>
<h1>Handlebar</h1>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/app.js"></script>
</body>
app.js
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"}
var html = template(context);
$("#entry-template").html(template(context));
When the browser gets loaded i am getting a blank screen, but while debugging via firebug able to find the values title and body
You're replacing the content of a <script> element:
$("#entry-template").html(template(context));
and #entry-template is a <script>:
<script id="entry-template" type="text/x-handlebars-template">
Browsers don't display the content of <script>s with that type. You want to put your filled in template into something like a <div> that will be displayed:
<h1>Handlebar</h1>
<div id="html-goes-here"></div>
and then:
$("#html-goes-here").html(template(context));
My problem is I can't seem to use #RenderSection from a nested template when #RenderSection is defined in the base template. Currently, I have a nested base template which is linked to a child template which is then used in the view pages. When I define the #RenderSection in the base template and render it in the view pages it throws an error.
Here's the exact problem.
I want to create a RenderSection to allow me to insert custom scripts.
My base template....
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
#RenderSection("HeaderContent", false) // The region of the header scripts (custom css)
</head>
<body>
#RenderBody()
</body>
</html>
I then skip the child template as I do not want to put any custom head code in there and apply it to the page itself..
#section HeaderContent {
<script>alert("hi");</script>
}
My problem is that I cant seem to add custom head code in to the base template from my normal pages.
The following sections have been defined but have not been rendered for the layout page ~/Views/Shared/OneColLayer.cshtml": "HeaderContent.
Do I need to include a pointer to the base template in the view page?
#{
Layout = "~/Views/Shared/BaseTemplate.cshtml";
}
My new base template
<head>
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/layout.css")" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/global.css")" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/js/fadeInFadeOut.js")"></script>
<title>#ViewBag.Title</title>
#RenderSection("HeaderContent", false)
</head>
<body>
#RenderBody()
</body>
my new child template
#{
Layout = "~/Views/Shared/BaseTemplate.cshtml";
}
#RenderSection("HeaderContent", false)
#RenderBody()
my view
#{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/OneColLayer.cshtml";
}
#section HeaderContent {
<h1>Left Content</h1>
}
<div>my view content</div>
the content gets placed in the oneCol template now the base template.
results...
<div id="Content">
<h1>Left Content</h1>
</div>
You need to specify the sections that are allowed to pass through in the middle template.
BaseTemplate.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
#RenderSection("HeaderContent", false) #* The region of the header scripts (custom css) *#
</head>
<body>
#RenderBody()
</body>
</html>
EDIT
your new child template
#{
Layout = "~/Views/Shared/BaseTemplate.cshtml";
}
#section HeaderContent {
#RenderSection("HeaderContent", false)
}
#RenderBody()
If you put the render section inside of a section from the base template, it will render that section in the correct place on the base template.
View.cshtml -> uses MiddleLayout.cshtml as it's layout
#section HeaderContent
{
<!-- header content that will now render -->
}
<!-- page content -->