I m using jade's dot syntax to render the HTML. Inside that template I used some code to iterate some data ( posts ). But cannot get the output, it gives an error as :
Cannot read property 'title' of undefined
I know i m using the incorrect syntax to use codes inside the dot syntax method. But don't know how to correct it. The following is the code. Please note:
div.container.
<div class="test">
each post, i in posts
<div class="cls">#{post.title}</div>
</div>
Any help is more appreciable.
Jade doesn't allow for using most of its syntax, such as each iteration, where plain text is expected, such as inside "Block Text" tags (dot-suffixed).
Currently, the each post, ... is being output as text content rather than being evaluated, so it isn't defining post (and i) for #{post.title} to succeed.
You could instead use lines of "Piped Text" to mix the HTML and jade's each iteration.
div.container
| <div class="test">
each post, i in posts
| <div class="cls">#{post.title}</div>
| </div>
Or, you can also use Jade's own syntax throughout:
div.container
.test
each post, i in posts
.cls= post.title
Related
I am using Express with Pug as a view engine.
Pug renders comments in the HTML. For example:
div
// comment
p Hello
Would be rendered as:
<div>
<!--comment-->
<p>Hello</p>
</div>
How would I disable this functionality and instead strip them from the template so that they aren't visible in the rendered HTML?
I can see there is this pug-strip-comments package, but there is no documentation whatsoever for Express.
I want to avoid using something like a middleware to strip comments.
Thank you.
You can strip pug comments by using the following code. Just add //- instead of just // and it will strip it from from the rendered HTML.
//- will NOT output within markup
p foo
p bar
// will output within markup
p foo
p bar
You can take a look at the comments documentation for pug here:
https://pugjs.org/language/comments.html
I am trying to write an ejs file with a for-each loop that displays, as text, names of javascript variables line by line. I want each name to be hyperlinked to a route, such as /getinfo, that renders a page that displays more information about the variable that was clicked on.
I tried to use an "a href" tag as follows:
<a href="/getinfo?name=" <%= variable.name>> <%= variable.name %></a>
I expected variable.name to be included in the URL's query parameters, but it won't be appended properly. Considering how HTML does not support string concatenation, I am not sure how to properly include this data in an HTTP GET request.
What would be a correct way to achieve this? Thank you!
It's simple. Using template literal
<a href="<%= `/getinfo?name=${variable.name}${variable.name}` %>">
Regular ejs to output escaped html
<a href="/getinfo?name=<%= variable.name %><%= variable.name %>">
For the html:
<div class="controls">
<input type="text" id="13796781312861791131776">
I tried the following to clear the text field:
#browser.div(:class => /controls/).text_field(:topics_text_field, id:'13796781312861791131776').clear
Which gave the the following error:
expected one of [String, Regexp], got {:id=>"13796781312861791131776"}:Hash (TypeError)
Note: I am using Ruby 2.0.
It's because of how you're defining the attributes of the text field.
You are basically telling Watir that your text field can be identified by the Hash key/value pair of
:topics_text_field => :id=> '13796781312861791131776'
Watir doesn't know what to do with this (understandably, because that is a nonsensical key/value pair), so it throws an error telling you that you gave it something it didn't expect.
I would give you advice about exactly how to define it correctly, but you didn't include any of the HTML for the page containing this div and text field.
Does
#browser.div(:class => /controls/).text_field(:id, "13796781312861791131776").clear
work?
Sorry, I couldn't include the topics_text_field part since you didn't include that in the html.
In my Thymeleaf template I need to set a custom attribute to a dynamically generated value. How would I do that?
I tried th:attr="name=value", but it seems to be pretty much strict about the 'value' part. For instance, I tried to generate the following attribute:
<div ng-init="myUrl='http://myhost.com/something'> ... </div>
where http://myhost.com/something is a dynamic part of the ng-init attrubute and is generated by Thymeleaf's URL expression, like #{...}
Any suggestions how to compose an expression that would produce the above piece of HTML?
Give this a try:
<div th:attr="ng-init='myUrl=\'' + #{http://myhost.com/something} + '\''">...</div>
It will output:
<div ng-init="myUrl='http://myhost.com/something'">...</div>
I am using node.js and express.j s to render an index.jade page which contains several script blocks taht contain templates to be used via backbone and underscore. The issue I am facing is that due to the inclusiong of <%= %> style variables within the templates, the Jade rendering is failing. The following code snippet causes a syntax error:
script#tpl-things-list-item(type='text/template')
td
a(href=<%= _id %>) link text
td <%= name %>
td <%= age %>
Note that it is only a problem when I use a variable inside the href value, if I remove the entire href, this snippet works just fine. Is there a way to work around this? I'd like to continue using Jade to define the templates as it is very concise but this is a show stopper.
Got it.
!!! 5
html(lang='en')
head
title= title
body
h1= "Hello World!"
script#tpl-things-list-item(type='text/template')
td
a(href!="<%= _id %>") link text
td <%= name %>
td <%= age %>