There's a lot of individual features that would make this easy, but instead of asking for specific features, I'll start with the actual goal.
I'm starting dust.js on nodejs, using consolidate to link it in... I plan to set the templating up from the beginning to support partial-renders and client-side renders... Seems smart!
But I have this partial-render at the top of my index.tt:
{>layout layout/}
It works great, giving me an html wrapper... but it seems it should be trivial for me to set a variable that will override this, either not rendering that partial, or rendering something like "no_layout" where it's a passthrough partial.
If I use "{layout}" instead, I'm fine as long as I make sure every runmode explicitly sets layout="layout".
If dustjs had the concept of value-defaults, I'd be fine... but I tried it, and it looks like node has to do that part (wrapping an if statement didn't seem to work, nor did an inline ||).
If dustjs let me run dustjs code conditionally, I'd be fine... but it looks like all the #if statements are about rendering.
I get that we want to keep separation of concerns, which is why I'm going to use dustjs in the first place... This to me seems like it should be a view-side concern when it will happen in the default way 99% of the time.
Here's the code I have right now (except layout.dust, which doesn't matter):
index.dust:
{>layout "{layout}"/}
{<main}
Welcome to {title}
{/main}
{/profile}
index.js:
exports.index = function(req, res){
res.render('index', { title: 'Express',layout: "layout" });
};
Like I said, it works... but it feels hacky and makes me have the controller explicitly tell the view to "render normally".
I think I will conclude that this isn't possible, and that there are so few users on dustjs that picking it because "big companies are picking it up" was a bad idea.
This is a guess, but I think the answer to this question is that nobody ever thought of this obvious situation.
Related
this seems like a very stupid question, but I really can't figure out how to do my navigation links properly.
I'm using express.js with handlebars as view engine.
My backend.handlebars has a naviation bar and loads in every sub-page of my backend under "/admin". It looks like this:
<nav>
Dashboard
Add Post
Edit Post
Categories
Static Text
</nav>
Now the correct routes are:
[server-adress]/admin/ for the dashboard
[server-adress]/admin/add for adding posts
[server-adress]/admin/edit for the editing posts
etc.
Now the way I've setup my links sometimes works and sometimes doesn't.
Sometimes every link works correctly when I'm in a sub-route like "admin/add" and want to go to "admin/edit".
Sometimes every link works when I'm under the main "admin/" to every sub-page, but not the other way around.
And sometimes everything works as intended, mostly when I delete the dot in front of the slash and then add it back end, restarting both times.
This obviously is too much of a gamble when deployed. As I don't know the absolute adress due to changing servers, I can't use absolute paths.
How do I go about this correctly?
I'm using MathJax with PageDown in a pretty straight forward way.
InitMathjax(converter);
var html = converter.makeHtml(text);
var $pageText = ...;
$pageText.html(html);
This works most of the time when I run the site locally, and almost never works when I run it in production. The result can also vary between each reload, so I think there is some kind of race condition based on how long it takes for various scripts to load and run.
I've tried doing Mathjax.Hub.Reprocess() and such, which don't seem to help. Doing MathJax.Hub.Queue(["Typeset", MathJax.Hub, $pageText.get(0)]); 100ms after the above code seems to have fixed the issue. But this feels like a patch, and the font looks off in production. (Looks like mathjax generated html ends up in a <span class="MathJax_Preview">, rather than <span class="MathJax">).
I want to understand the issue so I can actually fix it. Thanks!
Looking for a solution for a few days. Need help.
Source:
node.js + express.js + jade template engine
Problem:
Can't understand how I can render 1+ dynamic blocks on one page.
For example:
We have a page: News main page
Blocks on page: Latest news (list 20 itens), hot news (list 4 items), most viewed news (4 items), block with news categories (it can display current category on the page with page with card of one selected novelty, so it is dynamic block too), and block with some user auth data.
"block" i mean a widget as we can see on site, not a block of code.
What can I do in express? I can route special url to special function in routes.
So as I see, if a want to render all this blocks on the one page I have to call all functions rendering each block in only one function of route.
I mean it seems that I have to do something like this (sure in libs but doesn't matter here)
app.get('/news', function(req, res){
call_last_news(funcion(){
call_hot_news(function(){
call_get_user_info(function(){
...
...
...
template.render.here();
final_here();
});
});
});
});
This looks real but so unuseful and unsupportable code that .. That's bad.
I can see solution in calls from template engine to render some blocks on the page. But not just include because all blocks can use db or cookies, session data etc. all blocks are dynamic. But I have no idea how to create such engine using express.js + jade
Well I'm not certain I understood all of the problem but based on the pseudo code, it looks like the main concern here is that you have a deeply nested set of potentially independent and reusable functions. There are two approaches to this problem that come to mind:
Use a control flow library
Use something like async series, parallel, etc. (which function depends on the nature of your code – are all of the call_ functions independent?) That will clean up your code and make it more maintainable.
Use ajax
Another approach you can take is to quickly render the page without all of the call_ functions and just make several ajax calls from the client to fill in the data. You could have routes which look like '/news/last', and '/news/hot', etc. This is nice because you can separate out all of the logic for each of these units into reusable URLs so you can mix and match them on any page.
I want to be able to dynamically reference JavaScript and Stylesheets depending on which page a user is on in Express. I thinking the best way to do so (though I'm open to suggestions) is to pass the current view to the layout page.
For example;
Given the url http://example.com/trees
I would want to have some logic in layout.jade that said something to the effect of:
script(src="/javascripts/{view}.js")
Which would get rendered as:
<script src="/javascripts/trees.js"></script>
Any suggestions or best practices for doing this?
req.route is the matched route, so things like req.route.path etc are available, or of course req.url which may be parsed. With express 2x you can expose these values to views automatically using "dynamic helpers" or res.local()
There are no best practices for doing this, since Express doesn't provide Rails like url helpers, so I think you're approach is fine.
The easy answer is to just put ALL your javascript into a single file and be done with it. Ditto for CSS. See the Ruby on Rails asset pipeline for details. You are probably making your life more complicated than necessary and also less efficient by having different javascripts on different pages.
However, since you asked, the answer for javascripts is easy. Just put the extra <script> tags in the view, not the layout. Problem solved. CSS doesn't work as cleanly because the <link> tags need to be inside the <head>. In this case, I define the styles I need as an array of strings and loop over that in my layout template. So in my route I set up a local variable such as
locals.css = ['/css/one.css', '/css/two.css']
Then just loop over that in your template and generate one <link> tag for each.
I've been working on an API in Node.js for the first time, and of course I needed a test page so I decided to whip one up in Node as well for the hell of it.
After wracking my mind to come up with a good way to load the header, body and footer files (Jade syntax files) and have them be friends and render together, I came up with a recursive solution.
function assemblePage(name,markup)
{
markup = markup || '';
if (markup=='')
fs.readFile('header.jade', function(err,data){assemblePage(name,markup+data)});
else if (name != 'footer')
fs.readFile(name+'.jade', function(err,data){assemblePage('footer',markup+data)});
else
fs.readFile('footer.jade', function(err,data){console.log(markup+data);__res.send(jade.render(markup+data))});
}
So all I have to call is:
assemblePage('home');
Is this the best way to go about things?
I think you should be using expressjs(High performance, high class web development for Node.js) to render your templates.
It has a very sophisticated View Rendering. I think what you need is called view partials. In the screencasts section you can watch a screencast about view partials