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/
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.
I am new in ExpressJS, I know how to pass data from backend to the an ejs page, but I wanted to know how to pass data to a js file in the public folder?
So to pass data to a js file ( which js file is in the same folder as ejs ) while rendering the ejs page in the same time .
From ExpressJS I pass data to ejs by rendering ejs page like this
exports.user_signup = (req, res, next) => {
res.render('login', { page:'Login', email: req.body.email, idd: user[0]._id,} );
}
The ejs file :
<script src="file1.js"></script>
<%= email %>
So what I want, is to pass some data from ExpressJS to file1.js (which is in public folder)..
You cant access ejs data in a Javascript file or pass in data to a js file.
One possible way, Is that you can make use of variable passed to an ejs file.
Copy in your JS code to your ejs file and enclose them in a <script> tag.
pass in your required data to the ejs file ( in our case index.ejs ).
res.render('index', {data: 'some data'});
Inside the <script> tag in ejs file you can access the data like.
<script>
var x= <%- data %>;
console.log(x);
</script>
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"}));
});
});
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?