Example:
dashboard.html.twig:
<% extends layout.twig.html %>
<% include ('filter.html.twig') %>
<% block javascripts %>
< %endblock >
filter.html.twig:
filter form definition and html
filter form definition and html
filter form definition and html
<% block javascripts %>
javascript for use in filter form
javascript for use in filter form
<% endblock %>
I want the filter's javascript to be set in the layout, because that way it is loaded AFTER the JQuery.
But the Javascript is rendered right after the filter form, so getting $ is undefined.
So whatI want is the Javascript defined in filter.html.twig to override the block in layout.html.twig, same as extends.
Thanks!
Included templates can't alter the blocks of their includer. The "best" way I found i using the deferred block extension. It delays the render of a block. If you follow the advanced example in my link you can see how you could solve it
Related
I'm using EJS to include to maintain a standardized header and footer across a website.
<% include includes/footer %>
I'd like the footer to include file specific javascript for each page from which it is displayed:
<script src="public/js/<% NAME_OF_FILE_THAT_CALLS_FOOTER %>.js"></script>
Is this possible using node, express, and EJS?
I suggest you to import js file in the each page, not in footer.
Page.ejs
<% include header %>
//body
<script src="/bootstrap/js/bootstrap.min.js"></script>
<% include footer %>
Footer.js
// something more you want
</body>
</html>
This is similar to Jade - convert new lines to <br/> and keep the content encoded
so is there easy way to do the same in ejs:
<%- escape(foo).replace(/\n/g, '<br/>') %>
This could be possible by extracting escape method from ejs and assign to res.locals, but I'm looking for something more elegant if it's possible
I had a similar problem, when I had to display git commit message in my page. I had a look at how GitLab formats commit messages and found out that they use white-space: pre-wrap. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
So in my .ejs file I use:
<div style="white-space: pre-wrap"><%= commit.body %></div>
You can escape html with <%= %>, along with the replace function you already have (assuming foo is a string).
<%= foo.replace(/\r\n/g, '<br/>')) %>
I have a 'My Scores' view in my Node JS / Sails JS app and I'm using partials, one for a List View, and another one for a Grid View. When the user clicks the Grid or List View from the nav bar I'd like to be able to swap the UI with the given partial.
List view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/list-view')%>
</div>
Grid view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/grid-view')%>
</div>
Please advise.
No problem--just use a variable for the partial name, instead of hardcoding it:
<%- partial(viewName) %>
then in your config/routes.js:
"/listView": {
view: "list.ejs",
locals: {viewName: "../partials/list-view.ejs"}
},
"/gridView": {
view: "list.ejs",
locals: {viewName: "../partials/grid-view.ejs"}
}
That's assuming you're just routing directly to views. If you're using a custom controller action and res.view() to display your content, you'll put the viewName value in the second res.view() argument, like res.view("list.ejs",{viewName: "../partials/list-view.ejs"}).
Now, if you're trying to do this without reloading the page, then #tonejac has the right idea in his comment--either switch them using Javascript/CSS, or use AJAX to load content on-demand. Sails can only help on the backend!
I want to produce output like <% name %> which is for Backbone.js template with EJS. I can use
<%- "<%= name %>" %>
to solve it, but I think it makes some trouble.
EJS has no way to escape open and close tags. You can specify another open and close tags like {{ and }} that not confused with another document content.
Using Express with Don Park's HBS as the view engine, with the intention of using the same templating style for both client and server code. However I have run into a bit of a snag.
With the index.hbs shown here,
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<div id="place"></div>
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
{{#lines}}
<li>{{name}}</li>
{{/lines}}
</ul>
</script>
Heres what renders to the browser:
<h1>Express</h1>
<p>Welcome to Express</p>
<div id="place"></div>
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
</ul>
</script>
The Express View render process seems to have consumed the template block intended for use in the browser. As far as I can tell, the view renderer just takes the entire file.hbs as a string tempate to render, not distinguishing the script block from server view.
Any ideas/workarounds for this?
I'm using Handlebars in the same way and ran into the same problem.
I worked around it by storing this part:
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
{{#lines}}
<li>{{name}}</li>
{{/lines}}
</ul>
</script>
In a separate static file and then loading it via ajax after the page has rendered. This way my client-side template doesn't get mistakenly rendered by Express.
It would be nice though if there were a way to add a tag to let Express know to ignore blocks like that and leave them for the client-side.
If handlebars is truly compatible with Mustache, then this should work:
Change your delimiter first by putting this somewhere at the top of your template ( before any template placeholders )
{{=<% %>=}}
So now anything you want rendered by the server you will do:
<% foo %>
And anything you want rendered on the client like so:
{{ bar }}
More info is at the bottom of the Mustache manual here - http://mustache.github.com/mustache.5.html
For handlebars, uou can use backslash to escape the double braces, like so:
<script id="firstTemplate" type="text/x-handlebars-template">
<ul>
\{{#lines}}
<li>\{{name}}</li>
\{{/lines}}
</ul>
</script>