I need to dynamically render partial with certain names. In the back end, I set the following:
render.js
const myPartialFunction = _.constant('site/myPartial');
And in the hbs template, I try to get the value of myPartialFunction
page.hbs
{{> (myPartialFunction)}}
It renders the partial correctly, but I got the following error:
The partial undefined could not be found
However the following doesn't cause error
page2.hbs
{{> site/myPartial}}
Though using {{> (myPartialFunction)}} works, getting error every time the page is rendered is very annoying
How can I solve this problem?
Related
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 !!!
I have a webpage that I have the JavaScript in a separate file from my HTML file. I have imported
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in my HTML file but when I attempt to work in my js file to make some updates after a while away I get the following error
ERROR: '$' is not defined.[no-undef]
ERROR: 'document' is not defined. [no-undef]
Example where the above errors are references in my js code:
$(document).ready(function () {
$("#screenNum").hide();
...
}
The document Renders in the browser with no issues and the JS functions as designed and when I look at the developer tools in the browser there are no errors. I would like to get rid of these errors so that I can focus on actual errors.
It has been a couple years since I have worked on this document and I wanted to make some enhancements to it and am just now getting back to it. I do not recall this error when I last worked in it in Dreamweaver and do not know what I am missing.
All the similar questions I have looked at similar to this seem to deal with when the JavaScript is in the HTML document and not in a separate file.
Thank you, Tim Hunter, adding the below code worked perfectly.
/* global $, document*/
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 am making a static website using Wintersmith alongside the wintersmith-stylus and wintersmith-jade plugins.
I want to add a specific CSS file in a help page. The help page is based off the "layout" template. When I try to use a block to insert the stylesheet into the html head, I receive the following error:
Line ##: Unexpected identifier
layout.jade
doctype html
html
head
block head
link(rel="stylesheet" href="/styles/layout.css")
body
...
help.jade
---
template: layout.jade
---
//- Error inducing code
extends ./layout.jade
block head
link(rel="stylesheet" type="text/css" href="../styles/help.css")
//- end of error inducing code
...
Even if I move the extends and block head lines on top of the metadata block containing template: layout.jade, I still receive the same error. Removing extends ./layout.jade results in the error lines position moving from 40 to 5 in my case.
My guess is the error is caused by the wintersmith-jade plugin, but even if that's the case I'm lost for how I would go about fixing it.
Since I wanted to use both Stylus and Jade (with Jade for both content and templates), I ended up moving over to Harp. Harp not only has Stylus and Jade "built-in", but it's also slightly simpler than Wintersmith.
It's quite a workaround, but I'd say it's actually an upgrade at the same time.
I'm not using wintersmith-jade, but it looks like that plugin shouldn't affect the regular templates in /templates (which is what I think you're referring to).
Looking at templates/article.jade, it looks like you should use just extends layout instead of extends ./layout.jade.
The default templates also do not have the metadata block, but maybe that's necessary for the plugin you're using.
I am using express and Jade. When i pass variable that contains a link i get undefined in front and at the end of the url. What is this problem and how can i solve it?
The same problem as here :
Express image upload and view in jade
but it's not answered there.
Jade code:
block content
h1= title
p Your photos
#photos
img(src=#{purl})
p #{photo.title}
Rendering code
res.render('./user/show', { title: 'photos',photo: photo, purl: purl)});
purl is the variable of the link which when i console log just above the render appears as should and the photo.title appears too normally.
UPDATE
It's a JADE problem as with EJS everything works great.... Guess for a small problem i'll have to switch.. If anyone comes up with a solution, you're welcome.
First off, before res.render() add a console.log(purl);
You want to rule out that the variable is not undefined before it even reaches the Jade template.
In your jade, your image src does not need #{} around the purl variable. Try this:
img(src=purl)
You only need #{} when you are inside a text string and want to refer to javascript varaibles.
If you really wanted to, it could be written as img(src='#{purl}')
Your paragraph could also be written as:
p= photo.title
Where the = means the following is interpreted as javascript. No need for #{}.
If you wanted to mix text with the photo title using #{} works like a charm.
p #{photo.title} lorem ipsum