I created a node module which contains one simple js file. I want to use this js function inside my jade file. In music.js I require the module "myplayer":
var keystone = require('keystone');
exports = module.exports = function(req, res) {
var view = new keystone.View(req, res);
var locals = res.locals;
locals.myplayer = require('myplayer');
// locals.section is used to set the currently selected
// item in the header navigation.
locals.section = 'music';
// Render the view
view.render('music');
};
I know that it is accessing this file because I have a console print statement contained inside the myplayer js file that appears in my terminal when I go to music.jade in my browser. Then in my music.jade file I try to use the myplayer function, myplayer().tryplay.
extends ../layouts/default
block content
.container: .jumbotron
img(src='/images/logo.svg', width='160')
h1 Welcome
audio#test(controls='')
source(src='/mymusic/cold.mp3')
| Your browser does not support the audio element.
button Click me
if (section == 'music')
li sees variable
p The Music page is currently under construction
hr
block js
script.
$(document).ready(function(){
$("button").click(myplayer().tryplay)
});
It seems like I'm passing the variable correctly since I'm doing exactly the same as locals.section, which effects whether "sees variable" gets printed.
The error I get is "Reference Error: myplayer is not defined"
So I have a number of questions. Is the "if (section == 'music')" statement actually a jquery command, not css? But I don't see a "$" or anything to signify that.
"Section" clearly is a variable of value "music", but I can't figure out how to print it out either inside the music.jade css script or in the internal javascript.
And last, of course is, why can't "$("button").click(myplayer().tryplay)" find the object myplayer?
It seems like I'm just making simple syntax errors, but I'm afraid I'm really lost.
Thanks for any help.
This is what I'm trying to reproduce, but with node_modules:
extends ../layouts/default
block content
.container: .jumbotron
img(src='/images/logo.svg', width='160')
h1 Welcome
audio#test(controls='')
source(src='/mymusic/cold.mp3')
| Your browser does not support the audio element.
button Click me
p The Music page is currently under construction
hr
block js
script(src='/jplay/my_jquery.js')
script.
$(document).ready(function(){
$("button").click(tryplay)
});
Here's the my_jquery.js file:
var tryplay = function(){
$("#test")[0].play();}
The above 2 files work fine. The myplayer node_modules main file I created is:
var exports = module.exports = {} ;
function startup () {
var tryplay = function(){
$("#test")[0].play();}
console.log ("runUserScript");
}
startup ();
I wasn't intending to create a string, I wanted to pass the function on to music.jade. Clearly, using locals.myplayer is not correct?
So I changed music.js to:
var keystone = require('keystone');
exports = module.exports = function(req, res) {
var myplayer = require('myplayer');
var view = new keystone.View(req, res);
var locals = res.locals;
// locals.myplayer = require('myplayer');
// locals.section is used to set the currently selected
// item in the header navigation.
locals.section = 'music';
// Render the view
view.render('music');
};
And I changed music.jade to:
extends ../layouts/default
block content
.container: .jumbotron
img(src='/images/logo.svg', width='160')
h1 !{section}
audio#test(controls='')
source(src='/mymusic/cold.mp3')
| Your browser does not support the audio element.
button Click me
p The Music page is currently under construction
hr
block js
script.
$(document).ready(function(){
$("button").click(function(){myplayer().tryplay})
});
But now I get "ReferenceError: myplayer is not defined", so I'm not getting anywhere.
