Partial Not Defined in Jade - node.js

Here is what I have in index.jade.
And yes I am using express.js
extends layout
block content
h1 Invoices:
!= partial("invoice")
This matches what I see in every single Jade/Express tutorial. But I get "Reference error: partial not defined". Any ideas why?

Use include, without quotes (This example is from the jade documentation)
users = [{ name: 'Tobi', occupation: 'Ferret' }]
each user in users
.user
include invoice
Where invoice is your "partial" template.

Jade newest version doesn't support partials. You might be following outdated tutorials. Please read up on jade documentation here

Related

Bolt-CMS Using extensions in page?

I read this from a recent answer to a question:
After enabling the extension, just use {{ twitterfeed() }} in your templates.
But, what if I only want say a contact form on one page? Putting the tag in the page's text field doesn't work. And putting it in the template would have it available on all the pages using that template. Do I have to duplicate a template to use only for the contact page? If not where do I put the contact form tag?
I went to Bolt's extension page, selected "how to use extensions" from the menu, and got this message:
No proper name for a page in the docs. Bye!
Perhaps someone at Bolt could fix the URL?
I would like to know why none of the extensions I want to use are not working. I am clearly missing a vital piece of info.
Thank you.
After enabling the extension, just use {{ twitterfeed() }} in your templates.
The Twig function {{ twitterfeed() }} belongs (generally speaking) in a Twig template file. You can use Twig in record fields, but that requires setting allowtwig: true for that Contenttype field.
But, what if I only want say a contact form on one page?
There are a few ways to do this, but the easiest way is to make a copy of your sites template file for the page's Contenttype and select that template for the 'Contact' record. The default 'pages' Contenttype that comes with Bolt has a templateselect field type that enables this.
No proper name for a page in the docs. Bye!
Fixed! Thanks for pointing it out.

data-bind is not working in jquery

I must not be using jsfiddle correctly. Because I am having problems with a more complex project I have decided to go back to the intro and see if there is something I missed.
I am using PluralSight videos to get up to speed with knockout.
In the intro demo Steve Michelotti has a fiddle in which he is binding data in jquery prior to adding knockout. I can't seem to get this binding to work. The fiddle is here
http://jsfiddle.net/SapphireGirl/Bdr55/2/
This is a very simple example and I would expect to see the
Hello, bob in the run box but the name is not binding the the text in the view model even in jquery like it is shown in the demo.
He is using jquery 1.7 while I am using jquery 2.0
Why won't my name bind?
Something silly I am sure.
javascript:
$(function(){
var viewModel = {
name: "bob",
changeName: function() {
this.name = "steve";
}
};
ko.applyBindings(viewModel);
});
Thanks in advance
You say
In the intro demo Steve Michelotti has a fiddle in which he is binding data in jquery prior to adding knockout. I can't seem to get this binding to work.
but in your code sample you're explicitly referencing ko - the Knockout object.
The problem is that you want to use both JQuery and Knockout - so far you've chosen 'JQuery 2.0' as the framework for your page, but you haven't loaded Knockout anywhere.
Go to the 'External Resources' section on the left, and paste 'http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js' (one of the Knockout CDN urls - from their download page) and press the '+' to add it to your jsfiddle.
Press 'Run' and now everything should work.

Node Express markdown loop

How do I loop over an object and output markdown as part of the loop in my jade template?
Here is my template file
block content
section.content
h1= title
p Welcome to #{title}
ul
each post in posts
li!= :markdown
post
Here is an example posts object
{
"post1": "#Hey\nHow are you?",
"post2": "#Hello\nworld"
}
But I don't seem to be able to get the markdown to work inside of the loop, I've read over the documentation and tried Googleing but don't seem to be able to find anything that doesn't require loading another library for markdown in the view when Jade already has it.
I did some more research on the issue and as far as I understand it it is because:
:markdown
Is compiled at a different time to evaluated scripts such as my != post
The fix was:
Since I could never get :markdown to compile after my post object, I injected the node-markdown module into my views like this.
var MarkDown = require('node-markdown').MarkDown;
res.render('blog', {
"title": name,
"md" : Markdown,
});
And in my view I used this
each post in posts
li!= md(post)
And it all appeared to work, I've left the title var out of my example because it wasn't really part of the fix, just asthetic.

Render partial view with jade on select change

I need to do the following,
I have a <select> (a list of team names), when the user selects a team, I get relevant information re: the team and display it.
How do I do this in jade?
I'm trying the following, (but I'm wrong obviously, I don't see a lot of documentation out there).
Briefly, I'm doing a include test.jade on my main page, and a res.render('test', {team: team_obj});
jade:
h1 #{team}.name
h2 #{team}.homeGround
h3 #{team}.manager
h4 #{team}.aka
nodejs:
collection.findOne(query, function(err, team_obj){
res.render('test', {team: team_obj});
});
I'm getting the information correctly in team_obj.
Get the following error when I run the app,
team is not defined
Now this is happening because test.jade is getting rendered before I feed it the team_obj.
Questions:
1) Am I doing this right? is include the correct way of partially rendering jade views? if yes, how do I make sure it renders only when the user has selected an option?
2) Is there a partial views concept in jade I'm unaware of?
1) you should use #{team.name}
2) you can't change the team object once the selector is changed. the template was rendered once with the database result. - such functionality should be handled by client side JavaScript and AJAX calls. partials in templates are just a way to share common pieces of templates, and its done in Jade via include.
I don't know what you're rendering and including and when.. but id you use a template variable like #{team.name} you have to make sure that the template was rendered with the team object.

How to use a jade template to accept information from multiple sources and display with include statements

I have this template:
.bar
.titleBox
a.title(href=URL) #{title}
Which I want to include multiple times in another page, titles.jade, like so:
#contentBox
include bar
include bar
include bar
And I want each one to have a different value for URL and title.
I have this code in node:
read(function(post){ //post is an array of objects retrieved from a mongodb collection
// I was thinking of using a for loop to iterate through the array
res.render('titles', {title: post[i].title, url: post[i].URL});
How might I achieve my desired outcome?
I'm not sure what these objects represent, but I'll assume for now we are talking about books. If your jade template can get a list of books as a local - e.g. if it's redered like:
res.render('books_index', {books: [{title: 'dune', url: 'http://www.dunenovels.com'},...]})
You can use a mixin. Something like this:
mixin listBooks(books)
each book in books
.bar
.titleBox
a.title(href=book.url)= book.title
later in your template you can render the mixin:
mixin listBooks(books)

Resources