I am developing a Web Application using node.js, express and jade. I have the following jade template which I am seeing using a WebView in a Phonegap application:
doctype mobile
html
head
script(src="cordova-2.1.0.js")
script
var ready = function() {
alert(\'Ready\');
}
document.addEventListener("deviceready", ready);
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
h1= title
button(id='vibrateButton', onclick='navigator.notification.vibrate(2000);')Confirm
#services
- each service in services
div.service
a(href=service.link)!= service.name
div.desc= service.description
What this template will produce is a webpage with a list of items (a description and a link) which will be fetched from a mongo database. The page is served using node.js
Now, the cordova script is not loading because the alert ("Ready") is not being displayed. Also, if I hit the button the device won't vibrate and the console will display the following message:
Uncaught TypeError: Cannot call method 'vibrate' of undefined at http://xx.xxx.xx.x:3000/:5
How can I include the Phonegap script using jade? I have tried to load simple scripts with just an alert and it works, but in this case I don't know why it is not working.
Could anyone provide advise please? Thanks.
With recent changes to cordova, you should take a look into InAppBrowser api. That's the recommended way to deal with remote pages embedded in your application.
In the end, you'll probably have a single index.html on the application to make sure the cordova js api is loaded and everything is ok. Then you'll open an InAppBrowser targeting your remote page (remember to whitelist it on config.xml for a better experience!).
The dot after the script is missing. Read this:
"Often you might want large blocks of text within a tag. A good example is with inline scripts or styles. To do this, just add a . after the tag (with no preceding space)"
It's taken from the jade-lang reference.
Example:
script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
Will render:
<script>
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
</script>
these will never work.
the html pages needs to be on the client side( app side ) not in the server side(node).
Example. In a android phonegap proyect on the assets\www folder.
i dont know for wat SO is your app, but
App client side: views, phonegap, jquery .... and all the stuff to request the data to the node server.
Server side: dbStuff, and all the stuff to retrieve the data to the app requests.
hope it helps.