Question

我是Jade模板的新手。这是layout.jade：

html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')

如您所见，模板文件末尾有两个javascript。我的另一个玉文件 home.jade 是：

extends layout

block content

        // Content Header (Page header)
        section.content-header
          h1= title

        // Main content
        section.content

script(type='text/javascript').
  $(function() {
     alert('here!');
  }

与此文件相关的JavaScript位于文件的末尾。不幸的是，块内容嵌入在layout.jade中，因此这里的脚本在jQuery之前加载。永远不会调用代码。有没有办法解决这个问题，以确保在jQuery之后加载javascript？感谢

Answer 1

您可以在布局中定义更多块来填充。您甚至可以为块定义默认值：请参阅http://jade-lang.com/reference/extends/

layout.jade：

html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
    script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')

    block script

home.jade：

extends layout

block content

        // Content Header (Page header)
        section.content-header
          h1= title

        // Main content
        section.content

block script
    script(type='text/javascript').
      $(function() {
        alert('here!');
      }

这将分别呈现您的内容，js库和脚本。

在layout.jade中，缩进body内的脚本标记。

如何确保javascript位于Jade模板中的代码底部？

1 个答案: