I need to use template for rendering of each ItemView:
var ItemView = Backbone.View.extend({
className: 'item',
template: _.template($('#itemTemplate').html()),
initialize: function () {
}
});
So I need to define html template at first:
<script id="itemTemplate" type="text/template">
<img src="<%= photo %>" alt="<%= name %>" />
<h1><%= name %><span><%= type %></span></h1>
<div><%= address %></div>
<dl>
<dt>Tel:</dt><dd><%= tel %></dd>
<dt>Email:</dt><dd><%= email %></dd>
</dl>
But I use Nodejs Jade Template Engine and I don't understand how shuold I define in it.
Help please.
That's easy, but there's one catch: You don't want Jade to escape attributes content so use foo!='<%= bar &%>' instead of just foo='<%= bar &%>'.
Here we go:
script#itemTemplate(type='text/template')
img(src!='<%= photo %>', alt!='<%= name %>')
h1 <%= name %>
span <%= type %>
div <%= address %>
dl
dt Tel:
dd <%= tel %>
dt Email:
dd
a(href!='mailto:<%= email %>') <%= email %>
It's tested, so you can use it right away :)
Related
I need the following HTML output exactly as shown below:
<section id='option1'>
<a href='#option1'><h6>Option1</h6><span>></span></a>
<div class='content'>Option1 content...</div>
</section>
I am using a Ruby block to create multiple sections like the one shown above in order to build an accordion UI. However, the problem is that the <span> tag won't nest inside the <a> tag properly. I have checked out other SO queries on the subject, but can't seem to find a solution.
What I hope to end up with is a Ruby block that looks something like this:
<% %w[option1 option2].each do |act| %>
<%= tag.section do %>
<%= link_to("#{act}".capitalize, "##{act}", {class: 'centered', data: { turbo_frame:"content"}}) do %>
<%= tag.h6 act do %>
<%= tag.span raw ">" %>
<% end %>
<% end %>
<% end %>
<% end %>
But I get a undefined method 'stringify_keys' for "option1":String
Can someone help me construct a nested content_tag that puts all the required elements in the right place?
Ok, so with some fiddling with the HTML structure, I came up with the following that works:
<div id='accordion'>
<% %w[option1 option2 ... optionN].each do |act| %>
<%= tag.h2(id:"accordion_header", class: "ui-accordion-header") do %>
<%= link_to("#{act}".capitalize, "#{act}") %>
<% end %>
<%= tag.div(id: "#{act}", class: "ui-accordion-content") do %>
<%= render "/sidebars/content/#{controller_name}/#{act}", formats: :html, handlers: :erb %>
<% end %>
<% end %>
</div>
<script>
$("#accordion").accordion();
</script>
I still haven't figured out how to get the anchor tags to respond to the click event and render the appropriate content via turbo-frames yet, so feel free to comment on how to do that. The documentation for Turbo is (at the present) woefully inadequate.
Rookie here, :) I have made an object people and referred it to profile.ejs as people:
app.get('/profile/:id',(req,res)=> {
var people = {
number: 3,
men: [{name: 'Bruce', job: 'Batman'},
{name: 'Jack', job: 'Samurai'},
{name: 'Bane', job: 'Janitor'}]
};
res.render('profile.ejs',{id: req.params.id, people: people});
});
Then when I try to template it like this it didn't work:
<p>of User..<%= id %></p>
<p><strong> name : </strong> <%= people.men[(<%= id%>)].name %></p>
<p><strong>job : </strong> <%= people.men[(<%= id%>)].job %> </p>
I am getting an error:
Error: Could not find a matching close tag for "<%=".
I assume you are inside some loop, no need to have extra <%= for id
<p>of User..<%= id %></p>
<p><strong> name : </strong> <%= people.men[id].name %></p>
<p><strong>job : </strong> <%= people.men[id].job %> </p>
I'm still a baby on web development. I am getting the following error, can
anyone help me?
Schema:
var campgroundSchema = new mongoose.Schema({
name: String,
image: String,
description: String,
_id: String
});
var Campground = mongoose.model("Campground", campgroundSchema);
app.get("/campgrounds/:id",function(req , res){
Campground.findById(req.params.id, function(err, foundCampgrounds){
if(err){
console.log(err);
}else{
res.render("show", {campground: foundCampgrounds});
}
});
});
This is the index.ejs template:
<div class="row text-center" style="display:flex; flex-wrap:wrap">
<% campgrounds.forEach(function(campground){ %>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="<%= campground.image %>">
<div class="caption">
<h4> <%= campground.name %> </h4>
</div>
<p><a href="/campgrounds/ <%= campground._id %>"
class="btn btn-primary">More Info</a>
</p>
</div>
</div>
<% }) %>
</div>
show.ejs:
<%- include('partials/header')%>
<h1>this is a show template</h1>
<p><%= campground.name %></p>
<%- include('partials/footer')%>
TypeError:
Cannot read property 'name' of null
You should check if campground is defined at all - you can either do that in your nodejs-controller or in your template. Here's an example for ejs:
<%- include('partials/header')%>
<% if (campground) { %>
<h1>this is a show template</h1>
<p><%= campground.name %></p>
<% } else { %>
<h1>No camground data was found</h1>
<% } %>
<%- include('partials/footer')%>
On the index.ejs. Use a span to retrieve the _id from the
DB, as follows
<span> <%= campground._id %> </span>
Why? Because _id is a unique object and is auto-generated. No need to even
include it on the Schema unless you want to create it yourself on which case
you'll then amend the controller with a variable. I struggled with this but now
okay.
I was following a tutorial and got stuck here. Everything looks ok to me. Still I am getting this error. Can some one point me to the right direction.
memberName is not defined
<% for(var i=0; i < notes.length; i++) { %>
<div class="list-group-item">
<div>Note from <em><strong><%=memberName[i]%></strong></em> on:
<%= createdOn.toDateString() %>
<strong><%= project[i] %></strong></div>
<div><strong>Work yesterday:</strong>
<%= workYesterday[i] %>
</div>
<div><strong>Work today:</strong>
<%= workToday[i] %>
</div>
<div><strong>Impediment:</strong>
<%= impediment[i] %>
</div>
</div>
<%}%>
Controller code:
exports.list = function (req, res) {
var query = Standup.find();
query.limit(12)
.exec(function (err, results) {
console.log(results);
res.render('index', { title: 'Standup - List', notes: results });
});
};
<%=memberName[i]%> in the ejs file mean "when I ll send the ejs, I ll replace that by the value of memberName".
But in your controller, you don t provide it, which block ejs.
In the controller, you should have something like:
res.render('index', {
title: 'Standup - List',
notes: results,
memberName: memberName //<--
});
When this one will be fixed, you ll also have to provide createdOn, project, workYesterday, workToday, workTomorrow and impediment.
<%= is a EJS tag for evaluating values in HTML.
<%= memberName %> will output the value of variable memberName in your HTML code. Thus you need to pass the parameter memberName while you are rendering the html page. You have missed out the parameter.
Your controller code should look like:
exports.list = function (req, res) {
var query = Standup.find();
query.limit(12)
.exec(function (err, results) {
console.log(results);
res.render('index', { title: 'Standup - List', notes: results, memberName: 'Test Member Name' });
});
};
You're probably looking for this:
<% for(var i=0; i < notes.length; i++) { %>
<div class="list-group-item">
<div>Note from <em><strong><%= notes[i].memberName %></strong></em> on:
<%= notes[i].createdOn.toDateString() %>
<strong><%= notes[i].project %></strong></div>
<div><strong>Work yesterday:</strong>
<%= notes[i].workYesterday %>
</div>
<div><strong>Work today:</strong>
<%= notes[i].workToday %>
</div>
<div><strong>Impediment:</strong>
<%= notes[i].impediment %>
</div>
</div>
<%}%>
Which can be further reduced to this:
<% notes.forEach(function(note) { %>
<div class="list-group-item">
<div>Note from <em><strong><%= note.memberName %></strong></em> on:
<%= note.createdOn.toDateString() %>
<strong><%= note.project %></strong></div>
<div><strong>Work yesterday:</strong>
<%= note.workYesterday %>
</div>
<div><strong>Work today:</strong>
<%= note.workToday %>
</div>
<div><strong>Impediment:</strong>
<%= note.impediment %>
</div>
</div>
<% }) %>
i m posting a form in geddy. i need to update my meta data according to posted data by the form, for this i have to pass post to
<%= partial('layout_header', {post: post}); %>
<div class="mainContain">
<div class="container">
<div class="wrapper">
<% console.log(post.title); %>
<%- displayFlash(flash); %>
<%- render(); %>
</div>
</div>
</div>
for the above implementation i need my 'post' data on application.html.ejs.
thanks
Use Session variables to pass data to header and required page. i used this for dynamic meta tags.
=========================== EDIT ======================
in controller
self.respond({
key: value,
headerTags: {
"pageTitle": "title",
"h1Tag" : "h1"
}
});
and in application.html.ejs
<%= partial('layout_header', {session: session, headerTags : headerTags }); %>