I am creating a sample application to learn how to use nodejs for client side. I have installed : node, npm with browserify before running this exercise;
Directory Structure
lesseon1
- index.html
- application.js
- js
- data.js
- listdata.js
index.html
<!DOCTYPE html>
<html>
<head>
<title>Node Lesson 1</title>
<script type="text/javascript" src="application.js"></script>
</head>
<body>
<div id="names"></div>
<script type="text/javascript">
var ol = document.createElement("ol");
ol.innerHTML = window.list;
document.getElementById("names").appendChild(ol);
</script>
</body>
</html>
listdata.js
var jsonData = require("./data.js");
for(item in jsonData){
console.log(jsonData[item].name);
window.list += "<li>" + jsonData[item].name + "</li>";
}
console.log(window.list);
data.js
var json = [{
"name" : "Rohit"
},{
"name" : "Amit"
},{
"name" : "Arti"
}];
And application.js is being generated using browerify
~/node_modules/.bin/browserify -e js/listdata.js -o application.js
Problem :
It is printing undefined in browser and browser console too. However if I copy paste js code in index.html, everything works fine.
In listdata.js, there are 2 console.log() statements. But it is executing only last one.
Am I missing something? or doing something in wrong way.
You did not export from data.js.
var json = [{
"name" : "Rohit"
},{
"name" : "Amit"
},{
"name" : "Arti"
}];
module.exports = json;
Or you can change to data.json and just type in valid json without var or exports and use it in listdata.js as var jsonData = require("./data.json");
Each required file, browserify wraps into function with function (require, module, exports) signature. That is reason why you might not have some variables globally. If you want so, use global. or window..
Related
I use hbs to render my pages with partials for navigation and footers.
router.get('/test', function (req, res) {
return res.render('test');
});
On one page I have template that uses mustache.js. This template doesn't work as it should as the {{}} seems to be picked up on the hbs render. Below is a basic example that illustrates the error. If I load this as a static page with express I get "Joe is a Web Developer", if I render it with hbs I get "is a".
Are there any work arounds that wont involve me changing how all my pages are rendered?
<!doctype html>
<html lang="en">
<head>
<title>Mustache.js Inline Method</title>
<script type="text/javascript" src="js/libs/mustache.js" ></script>
<script>
var view = {
name : "Joe",
occupation : "Web Developer"
};
function loadtemp(){
var output = Mustache.render("{{name}} is a {{occupation}}", view);
document.getElementById('person').innerHTML = output;
}
</script>
</head>
<body onload="loadtemp()" >
<p id="person"></p>
</body>
</html>
It was simple enough. I just had to escape the brackets with a \
So all it took was
\{{name}}
I'm trying to get a pie chart. However, it isn't working too well. The page is completely blank.
I'm using node.js. I have chart.js installed though npm. I run this html on my ejs file, and it is just a blank page.
<code>
<html>
<head>
<script src="../node_modules/chart.js/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Pie(data, pieOptions);
</script>
</body>
</html>
</code>
I didn't read too deeply into your code but I noticed that you have your node.js code in the head of the file. Unfortunately, node.js cannot be executed in the browser, but is used for server side implementation of code. What does your console say?
Here is what I had to do.
I copied the Charts.min.js file from the node_modules to the public folder.
Other than that, I have the canvas at the top. Also, I had to change the:
var ctx = document.getElementById("myChart").getContext("2d");
to
var ctx = document.getElementById('myChart').getContext('2d');
I'm trying to use the component concept for UI5 and have just built the below:
Index.html snippet:
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{
"sap.ui.ui5test.myapp": "./"
}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
new sap.m.Shell({
app : new sap.ui.core.ComponentContainer({
name : "sap.ui.ui5test.myapp"
})
}).placeAt("content");
</script>
Component.js snippet:
jQuery.sap.declare("sap.ui.ui5test.myapp.Component");
sap.ui.core.UIComponent.extend("sap.ui.ui5test.myapp.Component", {
createContent : function() {
var oView = new sap.ui.core.mvc.View({
id : "testview",
name : "sap.ui.ui5test.myapp.views.FirstView",
type : "JS",
viewData : {component : this}
});
var jsonModel = new sap.ui.model.json.JSONModel();
jsonModel.loadData('http://api.openweathermap.org/data/2.5/weather?q=Auckland');
//jsonModel.loadData('http://api.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric');
sap.ui.getCore().setModel(jsonModel);
oView.setModel(jsonModel);
}
});
In the above snippet for component.js, if I return the view as return oView; it is giving me an error saying "Uncaught TypeError: undefined is not a function". It goes away as soon as I remove the return statement.
If I dont return the view will it navigate to the view I instantiated and loaded above? As I see in the chrome developer tools, I do not seem to find the js file for FirstView to open it as I think it is not getting loaded.
Please suggest how to correct this and how to navigate further.
Awaiting your prompt responses eagerly.
Cheers,
AW
I checked your FirstView.js. Please do the following in your return statement:
return this.app;
As there is no local variable called app, if you write return app, then app is undefined.
Please use sap.ui.view in your createContent method:
var oView = new sap.ui.view({
id : "testview",
viewName : "sap.ui.ui5test.myapp.views.FirstView",
type : "JS",
viewData : {component : this}
});
I have been using requirejs on couple projects, and today is the first time I got this problem and not sure how to fix it. I am using requirejs and tyepscript, I can't really tell what's wrong here. Can someone take a look?
Here is my main.ts:
///<reference path="../lib/require/requirejs.d.ts"/>
///<reference path="TestClass.ts"/>
require.config(
{
baseUrl: 'js',
paths: {
puremvc: 'lib/puremvc/puremvc_standard_1.0_min'
}
}
);
require(
[
'puremvc',
'sim/TestClass'
],
function (TestClass ) {
var test = new TestClass();
test.logMsg("WHO AM I");
}
);
and this is my TestClass.ts
class TestClass{
constructor(){
console.log ("TestClass constructor")
}
public logMsg(msg:string){
console.log ("TestClass.log(): " + msg);
}
}
export = TestClass;
and my sim.html looks like this one
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simulation Tester</title>
<script src="js/lib/puremvc/puremvc_standard_1.0_min.js"></script>
<script data-main="js/sim/main.js" src="js/lib/require/require.js" ></script>
</head>
<body >
</body>
</html>
And this is my folder structure:
- root
- sim.html
- js
- lib
- require (containt requirejs)
- sim
- main.ts
- TestClass.ts
Any idea?
Are you loading puremvc through the script tag, or through require.js? I don't think you want to do both.
Over here:
require(
[
'puremvc',
'sim/TestClass'
],
function (TestClass ) {
var test = new TestClass();
test.logMsg("WHO AM I");
}
);
The callback function gets the modules in the same order you listed them. So the 'TestClass' parameter is being supplied the value from the 'puremvc' module. You probably want function(puremvc, TestClass) instead here.
My bottom_index.ejs looks like that:
<div>The bottom section</div>
In my code I declare ejs:
ejs = require('ejs');
Then compile the function:
var botom_index_ejs =
ejs.compile(fs.readFileSync(__dirname + "/../views/bottom_index.ejs", 'utf8'));
and then call it to get rendered html:
botom_index_ejs()
It works fine!
Now I would like to change my template to:
<div><%= bottom_text %></div>
and be able to pass the parameter (bottom_text) to the bottom_index.ejs
How should I pass the parameters?
Thanks!
Parameters are passed to EJS template as a JS plain object. For your example it sholud be:
botom_index_ejs({ bottom_text : 'The bottom section' });
Update:
test.js
var fs = require('fs');
var ejs = require('ejs');
var compiled = ejs.compile(fs.readFileSync(__dirname + '/test.ejs', 'utf8'));
var html = compiled({ title : 'EJS', text : 'Hello, World!' });
console.log(html);
test.ejs
<html>
<head>
<title><%= title %></title>
</head>
<body>
<p><%= text %></p>
</body>
</html>