Implementing jquery mobile in express js application with jade template

in layout.jade view file

doctype 5
html
         head
                 title= "MyMobileApp"
                 link(rel='stylesheet', href='/stylesheets/style.css')
                 link(rel='stylesheet', href='/stylesheets/jquery.mobile.css')
                 script(src='/javascripts/jquery.mobile.js')
                 script(src='/javascripts/jquery.js')
                 <meta name="viewport" content="width=device-width, initial-scale=1">
         body(class="ui-mobile-viewport ui-overlay-c")
                 div(data-role='page')
                 div(data-role='header',class='ui-header ui-bar-b')
                          h1 
                                   p My Sample Application
                 div(data-role='content',class='ui-content')
                          block content
                 div(data-role='footer',class='ui-header ui-bar-b')
                          h4= "Page Footer"

now, in index.jade view file,


extends layout

block content
p page content goes here

careful on indenting. jade template reacts the most with indentation.

Advertisements

#express-js, #jade, #jquery, #jquery-mobile, #mvc, #node-js, #template-engine