JQuery移动与玉无法正常工作

Question

我正在尝试使用jquery mobile with jade＆amp;表达。我对玉有点新意，帮我弄清楚这里出了什么问题真好。我在一个名为pre

的文件夹中使用zip下载中包含的标准Jquery mobile 1.3文件

我有两个文件布局：

doctype 5
html
  head
    title= title
    meta(charset='utf-8')
    meta(name='viewport',content='width=device-width, initial-scale=1')
    meta(name='apple-mobile-web-app-capable',content='yes')
    meta(name='apple-mobile-web-app-status-bar-style',content='black')
    link(rel='stylesheet', href='/pre/jquery.mobile-1.3.0.min.css')
    link(rel='stylesheet', href='/pre/jquery.mobile.structure-1.3.0.min.css')
    link(rel='stylesheet', href='/pre/jquery.mobile.theme-1.3.0.min.css')
    script(src='/pre/jquery-1.9.1.min.js')
    script(src='/pre/jquery.mobile-1.3.0.min.js')

  body
    block content

我的内容：

extends layout
block content
  div#page1(data-role='page')
  div(data-theme='a',data-role='header')
    h3
      | Header
  div(data-role='content')
    a(data-role='button',href='#page1')
      | Button
    a(data-role='button',href='#page1')
      | Button
    a(data-role='button',href='#page1')
      | Button
  div(data-theme='a',data-role='footer',data-position='fixed')
    h3
      | Footer

我得到的问题：

Answer 1

content.jade中的缩进是错误的。缩进div#page1(data-role='page')以下的所有内容，它可以正常工作

extends layout
block content
  div#page1(data-role='page')
    div(data-theme='a',data-role='header')
      h3 Header
    div(data-role='content')
      a(data-role='button',href='#page1') Button
      a(data-role='button',href='#page1') Button
      a(data-role='button',href='#page1') Button
    div(data-theme='a',data-role='footer',data-position='fixed')
      h3 Footer

如您所见，您甚至可以通过不使用管道|

来简化代码