Handlebars - Using handlebars clientside - javascript

I've adopted a project with Handlebars and have run into an issue getting handlebars to render templates client side.
Basically the way it's setup at the moment is the templates are rendering out server side. I'm at a stage now where I need to be able to call handlebars in AJAX responses to reference handlebars templates using the following method:
<script id="ajax-comment" type="text/x-handlebars-template">
<li>
<p>{{{comment}}}</p>
</li>
</script>
I understand how the method works but where i'm having trouble is actually getting the handlebars function to work on the client side in one of my javascript modules. Here is what i'm trying:
var Handlebars = require('handlebars');
console.log(Handlebars);
The error i'm getting whenever I try this is:
Error: Can't resolve 'fs' in ...\node_modules\handlebars\lib'
FS is obviously not available client side hence why it's not working but after reading through the various documentation on Handlebars around this, it seems to be the way you should do it. I'm not entirely sure why i'm getting this error, i'm not sure if this could be an issue with webpack. Handlebars is being called in via gulp-hb so not sure if this could also be the issue.
Any help as to why this could be happening would be much appreciated! Happy to provide any config files that could also help debug this.

An example
function onInitFs(fs) {
console.log('Opened file system: ' + fs.name);
}
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);
You can try this using html5 fs api
https://www.html5rocks.com/en/tutorials/file/filesystem/

Related

Node require mongo error - 'require is not defined'

I'm having a problem with mongo and node. I have a file called db.js where I put the require('mongodb') and if I import it to my index.html, I got the error:
require is not defined
But if I go to the db.js file and use 'node db', it works. I've tried import, require, src but still nothing works. Someone could help me?
<script type="text/javascript">
import 'js/db.js';
const MongoClient = require('mongodb');
Is there a reason that you need to configure mongodb on the front end? Unless you have a really good reason, I would strongly recommend against that. You basically throw any notion of security right out the window by doing that.
Now that we've got that cleared up, I think what you really are asking, is how you can let users make requests to mongodb from the front end. For that, you should use fetch or an HTTP request/response library like Axios in your front end javascript. Use either of these to send requests to your node backend and then you can interact with mongodb by passing along the user-submitted data from there.
Let me know if that helps you at all or if you need more help.
You should require mongodb statement on server side code not on the browser side.Browser don't understand the require/import statement.
You can try using module like browserify to see such functionality if it works.
http://browserify.org/

Node JS: ReferenceError: require is not defined

I want to use MySQL database. I installed MySQL with command npm i mysql. In order to use it, I wrote:
var mysql = require('mysql');
But when I run the program, it shows ReferenceError: require is not defined error.
I wrote this line in home.ejs file within a script tag.
Home.ejs isn't the approriate file to write this line in.
ejs files won't contains that much logic (except condition and loop over some element in your dom).
Basically what you want to do is anodeJs script file which will connect to mysql, handle the request and serve your ejs files with your data.
Using express you'll have something like this in your node file :
app.get("/home",(req,res)=>{ res.render("home.ejs", {data : data}) (where data is what you get from your DB
By default require() is not a valid function in client side javascript. I recommend you look into require.js as this does extend the client side to provide you with that function.
you need to do your mysql processing before you get to the ejs template. Right now, you are trying to use require in a template, which is being rendered on the browser. You won't be able to do that without using a module loader like requirejs.
require() by default is a NodeJS function on the server side. You can use require.js like Abhilash said. It's bad practice to have mysql in the browser. Your username, password, and host will be exposed to the world.
The browser does not have an API that require modules. Also, this is something that you would do in a nodejs application (in the backend NOT the front end), typically in a .js file.

Why do dependency problems cause javascript code not to run properly when within a Meteor project?

I have been trying to port HTML5 with js code into Meteor. I'm having Javascript dependency problems.
The code can be found at: https://github.com/cwilso/Audio-Input-Effects
I created a new basically empty meteor project (which runs fine) and then added all of the js files from the repo above (which also runs fine on its own).
In order to make sure that the load order was correct, I renamed all the js files using numeric prefixes so that they would definitely be in the same order that they are loaded in the github repo. Looking forward to Meteor coming up with a better solution to this particular issue. I made a local copy of one js file that was otherwise loaded from a url in the repo.
In order to try to initialize the js I also added a file hello.js:
if (Meteor.isClient) {
Meteor.startup(function () {
// code to run on server at startup
initAudio;
});
}
When meteor runs and I look in the console, I get the following errors:
Uncaught TypeError: o3djs.provide is not a function (120_shader.js)
Uncaught ReferenceError: initAudio is not defined (hello.js)
Uncaught ReferenceError: Matrix4x4 is not defined (110_visualizer.js)
Thank you for your help.
I was able to resolve this issue by putting all of the js source files into a single js file in the correct order.
Anybody still wanting information regarding meteor load order, Scotch.io wrote an update to the official docs which clears it up somewhat.
https://github.com/meteor/meteor/commit/a5bdf481dfece9ebc57107d71be478f9b48cbd1e

Javascript/Node/Twilio - ReferenceError: require is not defined

I have installed Node from:
Node
and run this in cmd:
npm install twilio
I then tried the example code provided by Twilio:
var accountSid = 'MyAccountSidHere';
var authToken = "MyAccountAuthTokenHere";
var client = require('twilio')(accountSid, authToken);
client.sms.messages.create({
body: "Jenny please?! I love you <3",
to: "SomeNumber",
from: "MyNumber"
}, function(err, message) {
process.stdout.write(message.sid);
});
Saved this to MyFile.js file and double clicked it.
I get the error message:
ReferenceError: require is not defined
This is my first encounter with JavaScript and I found a lot of similar questions, but have not been able to solve this.
I am to use this with QML, so I want to load it using:
import "MyFile.js" as MyFile
then call the javascript code as a function.
I've read a little into QML and I don't see how you could use a node.js module in QML. QML is used as a language where QT is the JavaScript engine and node.js is a server-side Javascript engine.
The require() function is a core function of node.js which is part of the engine. It's not something language-specific just like the window object in browser-based Javascript is not something in the Javascript language.
As I said in my comment, you should check out what node.js actually is: a server-side JavaScript engine, which executes JavaScript files. It is not a framework which you could load into another engine like QT.
Your code will run if you use it like this from the command-line:
node MyFile.js
I doubt this is helpful for your use-case as a QML import though.

Using Jade Templates (jade-lang.com) client-side

I'd like to use Jade templates client-side. Preferably generated using the Rails 3.1 asset pipeline. I can't really figure out how to do this.
Anyone who've stumbled upon the same problem and found a great solution? Any thoughts are much appreciated.
http://jade-lang.com/
http://ryanbigg.com/guides/asset_pipeline.html
If you use browserify you can use this handy jade middleware: jadeify.
Then you can just call jadeify("foo.jade", { x : 4, y : 5 }) browser-side after pointing a views directory at the middleware and you get back a jquery handle.
P.S: Probably right now Substack's answer is better.
browserify
Maybe you can use https://github.com/substack/node-browserify
Browser-side require() for your node
modules and npm packages
Just point a javascript file or two at
browserify and it will walk the AST to
read all your require()s recursively.
The resulting bundle has everything
you need, including pulling in
libraries you might have installed
using npm!
Browser
http://jsperf.com/dom-vs-innerhtml-based-templating/53 => The performance isn't that great according to this benchmark => http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js. But according to TJ it was never supposed to be used in the browser, but node.js instead. In that case it is going to be pretty fast. There are a lot of alternatives which you can use in the browser instead.
Checkout Blade. It is a Jade-like HTML template engine that is designed for client-side (and server-side) use. There are some other features that you guys might like, as well.
EDIT: But, only for Node.js servers. There is no Ruby implementation at this time.
This feature is now available in Jade.
http://jade-lang.com/api/
From their API Documentations:
var jade = require('jade');
// Compile jade file to a function
var fn = jade.compileClient('string of jade', options);
// Later in client site, render the function to HTML
var html = fn(locals);
You should pass the compiled javascript function to the client, for example by writing the function (fn in the example) to a .js file and then include the .js file in the html file with script tag.
Another option is using templatizer, which compiles jade to a .js file for you.
I wrote a gem called tilt-jade to do this within the asset pipeline. It's made to work exactly like EJS does with sprockets by default - it renders Jade templates down into functions so they can be called client side. I'm not sure it's a great solution, but it has worked okay for my needs.
I've just made a library for making jade available in client-side html. It is as simple as < jade>...< /jade>. Check it out: https://github.com/charlieamer/jade-query
Jade now supports compiling for the client by default; use the -c --client option. See http://jade-lang.com/command-line.
Here's a hacky but simple version for browserify using gulp-jade.
var jade = require('gulp-jade'),
replace = require('gulp-replace');
gulp.task('jade-client', function() {
gulp.src('./views/**/*.jade')
.pipe(jade({
client: true
}))
.pipe(replace(/function template/g, 'var jade = require("gulp-jade/node_modules/jade/lib/runtime");\n\nmodule.exports = function'))
.pipe(gulp.dest('./client/templates'));
});
Then in my client side JS file...
var template = require('./path_to_compiled_template_file');
var renderedTemplateHtml = template({ aLocal: 'blah blah'});
So you only send to the client the specific templates you need and browserify makes sure you only have one copy of the runtime.

Categories