Here is my flow.
I have a form (html template with js code ) that needs to be prefilled with some user properties and presented on the path /signup
These properties are passed as url params. There is a javascript in the page that will read this url params and then populate the fields.
I use restify.
Is there a way to present the page using restify ? If so how?
So far I have used restify to return data and not html.
What you will need to do is inject the parameters into your html template using some type of template engine for Node.JS. There are quite a few that you can use:
Jade
Mustache
Handlebars
Your route would look something like this if you were to use Handlebars to render your HTML page with populated fields using the parameters within the URL.
server.get('/signup/:firstname/:lastname', function (req, res, next) {
fs.readFile(__dirname + '/index.html', function (err, data) {
var template = Handlebars.compile("<form><input type='text' value='{{firstname}}'></form>");
res.setHeader('Content-Type', 'text/html');
res.writeHead(200);
res.end(template({firstname:"Dee", lastname:"Taylor"}));
});
});
Related
I passed function to render in my pug file. What I want is when the button is clicked, the function should start, but the function starts when I enter the site. Below is how I passed function and using this in PUG file
Router
const start = require('../bot')
exports.home = (req, res) => {
res.render('home', {
functionOne: start.mainFunction()
});
}
PUG File
html
head
link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700")
link(rel="stylesheet" href="/css/main.css")
body
button(type="button" id="mybutton" onclick="functionOne")
The res.render statement is only meant to send data to the template, you can't send a function through there. The Express documentation explains this.
The function is running when you request the page because that's actually what you're telling it to do when you include that function in there.
You will need to write some client-side JavaScript to make an AJAX call or form POST then create a new ExpressJS route on the server to capture that and run the function.
When a GET request is made on my site, I am trying to render templates that are stored on another server. Essentially my application will make a request to this server, and the response will contain the template that I would like to use. The server's response is a dust template in the form of a string.
What is the best way to render the template?
router.get('/', function(req, res) {
var options = {
host: myHost,
path: myPath,
port: myPort};
var templateReq = http.get(options, function(response) {
var templateStr = '';
response.on('data', function(chunk) {
templateStr += chunk;
});
response.on('end', function() {
var dustParams = myDustParams;
res.render(templateStr, dustParams); //THIS DOES NOT WORK
});
});
});
I understand that render looks in the 'views' folder to search for a template.
Also, I know that you can directly send HTML to the response using 'send', but by doing this I am unable to include the dust parameters.
You can use:
res.send(templateStr);
Regarding having dust populate the params in the template, you have to compile and render it before using the res.send
I wrote an npm module to do this by extending the express framework to read a template url from the view model along with a css selector of where to inject the content of the view.
You call res.render as normal but pass template url and selector rather than layout
res.render('view-name', {
template: 'https://courseof.life/johndoherty', // external url
templateSelector: '#promo-banner' // element within layout to inject view
});
It caches the template for 30 minutes before making another call to fetch the next version.
Is it possible to pass a server-side JavaScript variable to a <script> tag in an HTML view?
In my routes file I have:
exports.index = function(req, res){
res.sendfile('views/index.html', {
data: {foo: bar}
});
};
If I was using a Jade template, I could do:
script(type='text/javascript').
var local_data =!{JSON.stringify(data)}
To access the data object. However, that doesn't work for an html file. Is there a work-around for this?
Have a route send the data using res.json() and use AJAX in the html to fetch the JSON data.
http://www.w3schools.com/ajax/
I have some data in a mongodb database and want to pass it to a backbone collection when I load the home page. One way of doing this would be to set up a node route like this:
exports.index = function(req, res){
db.users.find(function(err, docs) {
var docs_string = JSON.stringify(docs);
res.send(docs_string);
};
};
But this won't work because it won't render my jade template that pulls in the backbone code, it simply shows the JSON in plain text.
Alternatively, I could render my jade template passing in the data as a variable to jade:
exports.index = function(req, res){
db.users.find(function(err, docs) {
var docs_string = JSON.stringify(docs);
res.render('index', {
title: "Data",
docs_string: docs_string
})
});
};
Then in the jade template, have a script like this to add the users to my user collection:
script
var docs = !{docs_string};
var users = new app.Users();
_.each(docs, function(doc) {
var user = new app.User(doc);
users.add(user);
})
But this seems wrong, since I don't really want to pass the data to the jade template, I want to pass it to a backbone collection. Also, with this solution I don't know how to then include an underscore template (on the backbone side of things) into the page rendered by jade on the server side.
What is the standard way of passing data from a node server to a backbone collection?
Assuming your data is an object, you should convert it to string using JSON.stringify() and then insert in a page inside script tag, so your resulting HTML looks like this (I don't use Jade):
<script>
var data = {...}; // in template instead of {...} here should be the instruction to insert your json string
</script>
Then when the page loads, your script will be executed and the data will be available as a global variable in the browser so you can initialise backbone collection using it. This all is a good idea only to bootstrap your data on the first page load (to avoid extra request) and then use API to request data for this and other pages.
Check out Steamer, a tiny node / express module made for this exact purpose.
https://github.com/rotundasoftware/steamer
What I usually do is:
res.render('myJadeTemplate');
but I want to add another transformation to the html before attaching it to the response.
How can I get the rendered HTML then modify it and send it over via res.send()
If you are using Express3. There is an additional (and optional) parameter to res.render() that is a callback that will give you the rendered HTML rather than sending it directly to the client.
res.render('myJadeTemplate', function (err, html) {
// html => rendered HTML from jade template
});
Ok I found a solution:
var jade = require('jade');
var fs = require('fs');
var jadetemplate = jade.compile(fs.readFileSync('code.jade', 'utf8'));
var html = jadetemplate({
params:"{Some parames}"
});
console.log(html);
Thanks for this thread
Node says Jade has no method "renderFile", why?