Question

我对玉模板问了同样的问题。但我现在想要使用车把。主要原因是它的html对我来说更容易。

这是我的视图文件夹结构：

views 
   |--- home.handlebars
   |--- layouts
          |---- main.handlebars

我的布局是：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    {{{body}}}

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

</body>
</html>

在我的 {{body}} 之后加载了jquery脚本。

这是我的主页模板：

<p>This is my home page</p>

<script type="application/javascript">
    $(function() {
        alert( "ready!" );
    });
</script>

如您所见，我试图在最后加载脚本。但不幸的是，它仍然在jquery脚本之前，所以我的脚本永远不会被调用。我的问题是，有没有像我在this question for jade template中做的那样（最后加载我自己的脚本）？感谢

Answer 1

我最终通过使用部分找到了解决方案。这是我的app.js：

var exphbs = require('express-handlebars');

var app = express(),
    hbs = exphbs.create({

        defaultLayout:'main',
        helpers: {
            section: function(name, options){ 
                if(!this._sections) this._sections = {};
                this._sections[name] = options.fn(this); 
                return null;
            } 
        }    
    });

app.set('views', path.join(__dirname, 'views'));
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

我的布局文件 main.handlebars ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    {{{_sections.style}}}
</head>
<body>
    {{{body}}}

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    {{{_sections.script}}}
</body>
</html>

我的模板文件 home.handlebars ：

<p>This is my home page</p>

{{#section 'script'}}

<script type="application/javascript">
    $(function() {
        alert( "I'm ready!" );
    });
</script>

{{/section}}

一切都与我在玉器模板中完全一样。唯一的额外工作是我必须在app.js文件中使用帮助功能。

Answer 2

由于把手不支持可以在不同时间覆盖和使用的块，我会采用资产管理器的方法。

您可以在应用程序的某个数组中放置要包含的脚本列表。然后在你的布局中，你可以在最底层循环遍历它们。唯一需要注意的是，您必须在应用程序逻辑中指定它，有些人会发现它很混乱。

应用程式：

app.use(function (req, res, next) {
  res.locals.scripts = [];
  res.locals.scripts.push('/assets/js/common.js');
});

// ...

app.get('/your/route', function (req, res) {
  res.locals.scripts.push('/assets/css/something_specific.js');
  res.render('mykoolpage.hb', { some: 'variables here'  });
});

模板：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    {{{body}}}

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    {{#each scripts}}<script src="{{this}}"></script>
{{/each}}
</body>
</html>

因为你说你是一个相当新的表达方式，我只想澄清一点：你不需要将res.locals传递给res.render()中的模板，它会自动添加。 app.locals也是这样的。

Answer 3

我可以像这样修改主布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    {{style}}
</head>
<body>
    {{> page/title}}
    {{> page/nav}}
    {{{body}}}

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    {{{script}}}
</body>
</html>

然后在我的路由器中：

var express = require('express');
var router = express.Router();

var script = '<script type="application/javascript">' +
    '$(function() {' +
        'alert( "ready!" );' +
    '});' +
'</script>';

router.get('/', function(req, res) {
  res.render('home', { title: 'My title',
                     script:script});
});

module.exports = router;

这很有效。但它并不优雅和麻烦，因为我无法通过配置模板文件本身来实现它。还有更好的方法吗？

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

3 个答案: