如何确保javascript位于Jade模板中的代码底部？ [英] How to ensure the javascript is at the bottom of the code in Jade template?

问题描述

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

I'm new to Jade template. Here is the 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 是：

As you see, there are two javascript at the end of the template file. My another jade file, home.jade is:

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？谢谢

The javascript related to this file is at the end of the file. Unfortunately the block content is embedded inside the layout.jade so that the script here is loaded before the jQuery. The code will never be called. Is there any way to solve this problem to make sure the javascript here is loaded after the jQuery? Thanks

推荐答案

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

You can define more blocks in your layout to fill. You can even define default values for blocks: see http://jade-lang.com/reference/extends/

layout.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')

    block script

home.jade：

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库和你的脚本。

This will render your content, js libraries and your script respectively.

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

In layout.jade, indent script tags inside body.

这篇关于如何确保javascript位于Jade模板中的代码底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！