I am using gulp to compile Jade for a static website. There is a single gulp task that compiles all the jade files into HTML files.
I am creating a 10 step process, each a single page of HTML with "previous" and "next" buttons
I want to create a partial like below
a(href="#{prev}") Back
a(href="#{next}") Continue
For each page, the prev and next values change. Is there a way to call the partial from within each page's jade with custom prev and next values?
I am assuming, like how you bind data in handlebars template and compile, I can have a different locals object for each page and render the same partial with different data.
Am I approaching this wrong or is this something possible with jade? All answers I can see are related to using express with Jade. I'm only creating a static website, just the HTML alone infact.
If you're including the partial within larger Jade templates via include then it's simply a matter of changing the locals for the larger template you're rendering.
gulp.src('./templates/template-that-includes-a-partial.jade')
.pipe(gulpJade({
locals: {
prev: 'some value',
next: 'some other value'
}
})
.dest('./build/templates/');
Something like that should work. The partial view should have access to the same locals as the parent view that includes it.
I found out that you can define Jade variables using - in the parent template and call the partial with this data
- var prev = "a.html"
- var next = "b.html"
include partials/_var
And then use interpolation in the partial to use corresponding values
a(href="#{prev}") Prev
a(href="#{next}") Next
This way, I can call the same partial in different parent templates but pass in varying values for each page.
Related
I have a js block in my template that collects all javascripts on the bottom of the page. I usually extend base template and append JSs using parent() Twig function to keep child scripts below parent ones. It works well but now I would like to include a partial that would also append scripts to the js block. Something like this:
http://twigfiddle.com/3w8g0o
I want following order:
main content 1
partial content
main content 2
base js
main js
partial js
If I use use instead of include, then parent() returns js block from partial.twig instead of base.twig.
The only solution I found would be to
Add use of the partial above the main content block
Replace include with block('partial_content')
Append js from main.twig with block('partial_js')
http://twigfiddle.com/3w8g0o/2
which means there are 3 things to remember when including new partial instead of 1 which will probably lead to forgetting something some day. Is there an easier (one line from main.twig preferably, partial.twig can be more complex) way to achieve my desired order?
how can we easily render partial views in JADE using the model-view pattern like this: (pseudocode)
response.render('view', model)
and inside view we have
foreach element in model
render('_elementPartial', element)
or JADE doesnt support partial views this way?
actually i fixed this, didnt know we dont have to pass parameters if we are within same scope
so
if we do something like:
p #{someVariable}
include _partial.jade
we can also use #{someVariable} from within _partial.jade
Or can you render partially and render rest later. So lets say when app starts up it renders most of the html. But when user abc wants to see his profile jade renders name to abc and merge it with regular pre rendered html and then you send it etc.
Rendering whole html pages at every request seems like a waste.
Converting all static html to jade seems like a annoyance that can be avoided. Slowly css became LESS and html became JADE?
I am lost on how to use jade I am learning express.
You can use Jade's compileClient function to create a function that will render predefined Jade code on the fly. (See the API reference.)
So, if you create a Jade file with the dynamic HTML, and compile that for the client, you can then call that function at a later time, and insert the resulting HTML string to the DOM.
I'd like to pass the name of a template file to my jade template and have it expand that template. I'm using node and express.
html
div(id="content")
extend #(content}
seems intuitive to me but it doesn't work. Is this possible and/or is there an alternative pattern to better achieve this?
After rethinking the pattern (I'm brand new to express and node), I realized a better solution. What I've done is taken the content (which was all static) and included it in block statements in multiple template files. I then serve those template files based on the route.
Say I have a layout page that has header and footer and multiple views: index, search, and getting started.
//layout.jade
html
head
block extra_headers
body
div(id="header")
div(id="content")
block content
div(id="footer")
//index.jade
html
block head
script(src="sss.js")
block content
| welcome to my home page
//results.jade
html
block head
script(src="search.js")
block content
| my search results
And so on with 'getting started'. My node code then looks like this:
app.get('/', function(res, req) {
return res.render('index'); // renders the index view.
});
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.