I'm trying to do a foreach with partials into expressjs project, but I don't get
main.hbs
{{#each pages}}
{{>this}}
{{/each}}
app.js
app.get('/',(req,res)=>{
let pages = ['test1','teste2']
res.render('index',{user:req.user,pages:pages})
})
Then show me this message
Error: The partial this could not be found
The Handlebars documentation states that dynamic partials require parentheses around the expression that evaluates to the partial name. So one would think that {{> (this) }} would be sufficient.
However, in my experiments with this, I could not get this to work. Without digging deeply into the source, I assume there is something special about how this is parsed in this context. Therefore, to get it to work, I had to use as to give me an aliased reference to each page name. My template became:
{{#each pages as |page|}}
{{> (page) ..}}
{{/each}}
Note: The .. is there to set the parent object of pages as the context of the partial.
I have created a fiddle for reference.
Thank you my friend !!! Now it works !!!
Related
If I have a set of data called products and if want to render them on a view page I can do something like this:
<ul class="product_list">
{{#each products}}
<li>{{products.ProductTitle}}</li>
{{/each}}
</ul>
But in that loop above, I want to include some other data like this:
<ul class="product_list">
{{#each products}}
<li>{{products.ProductTitle}}</li>
<img src="{{appvar.CDN}}/img.jpg"/> // appvar is a different data object
{{/each}}
</ul>
At the moment, if I do as above, I get nothing back from {{appvar.CDN}}. No error, just nothing... so it ends up rendering like <img src="/img.jpg"/>
I can't see this particular scenario addressed in the handlebars.js documentation (I think a lot of stuff is undocumented! may have to look into vue.js for the server side).
Take a look at the handlebars documenation for paths https://handlebarsjs.com/#paths. To access the appvar you might need to include ../ before your property name, so that handlebars will evaluate it against a parent context.
I am rendering a view with the EJS template engine based on some dynamic variables. For example:
res.render("index", {
dynamicVariable: newEverytime
});
I am currently inserting it inside my HTML like so
<% if(someCondition){ %>
<div>
<%= dynamicVariable %>
</div>
<% } %>
I want EJS to create a new <a>tag every time as opposed to replacing my a tag each time. How can I achieve this?
EJS on the server side doesn't create any DOM nodes. It processes HTML source code as text. It just prints strings and it's the HTML parser on the client side that creates the DOM nodes from that.
I think you are asking about a strange solution to a problems that you say nothing about. It would b more useful to ask about the actual problems you're having, what have you tried so far and why it's not working.
I'm using handlebars with KeystoneJS and am trying to extend the main import in the default template. At the moment it only includes the {{{body}}} tag imported through the view plus the partials that I'm using.
Is there any way to add a couple of other imports (i.e. intro content, page title, additional scripts). In the jade version on the demo site it just imports it as a content block. Is this a limitation of handlebars?
You can do this with handlebars just fine using partials.
Put your partial in the folder indicated below:
Then in your layout ('default.hbs' in this case) reference the partial like you would normally in handlebars.
<div id="header">
{{> navigation this}}
</div>
The '>' means insert partial.
In this case 'navigation' is the
partial name in the partials folder.
'this' is the data context. Its what you want to do with the 'locals.data' object passed into handlebars by keystone. Using 'this' will pass the whole lot through whereas doing something like 'locals.data.navigation' would pass the navigation object through to the partial making it directly accessible in the partial (good for DRY).
Hope that helps. The partials specific documentiation for handlebars is here if you are interested in looking into a few more things you can do with scope etc http://handlebarsjs.com/partials.html
I'm trying to use a handlebars each iterator in the following chunk of template code:
<table>
<tr><th></th><th>Today</th><th>This Month<br>(To Date)</th><th>Last Month</th></tr>
{{#each Activities}}
{{examineObject this}} - first -
<tr><td>{{examineObject this}}</td>
<td>{{Today}}</td>
<td>{{ThisMonth}}</td>
<td>{{LastMonth}}</td></tr>
{{examineObject this}} - third -
{{/each}}
<tr class='total'><td>Net Change</td>
<td>{{Totals.Today}}</td>
<td>{{Totals.ThisMonth}}</td>
<td>{{Totals.LastMonth}}</td></tr>
</table>
examineObject is a handlebars helper I have written to simply call JSON.stringify() on the variable. I'm doing this to evaluate the context. The helper is simply:
examineObject: function(object){
return JSON.stringify(object);
}
When I compile and render the template above, something very odd happens. The context of this at both the first and third examineObject call is the individual activity selected by the each iterator. However, the context of this in the second examineObject call (surrounded by html tags) is the context of the entire template - NOT the context of the individual activity selected by the each iterator. Can anyone explain why this would be?
Don't use jQuery's .find() to get your handlebars template because it will be scraping a rendered DOM, which may be different from your written file contents.
Instead, try loading your template file asynchronously
Update:
Or if you have a multitude of templates and don't want to run numerous async requests, you may be interested in precompiling the handlebars templates as demonstrated in "Handling handlebars.js like a pro".
I'm using express.js and EJS as template engine.
I don't understand how to use partials, I have seen at the examples but the author used JADE template engine, so I don't know how to apply it with EJS.
I have a simple view named: test.ejs and another .ejs file named part1.ejs
I need to show part1.ejs inside test.ejs.
I tried putting <% partial('part1', {}) %> (into test.ejs) but nothing happen, It does not include that file.
Could someone give me an example?
Thank you!
The correct code in your situation would be:
<%- partial('part1') %>
If you want to include unescaped HTML use <%- and if you want to escape HTML (unlinkely though when including a partial) you can use <%=.
Resources:
Node.js - EJS - including a partial
http://groups.google.com/group/express-js/browse_thread/thread/62d02af36c83b1cf
Its an old thread, but here is how you do it in the newer version of EJS.
<% include part1 %>
given part1.ejs contains the html you wish to include.