使用Express的Node.js：在Jade视图中使用脚本标签导入客户端javascript吗？

Question

我有一个运行Jade模板引擎的node.js express服务器。

我有一个布局翡翠文件，它导入单个视图的主体，如下所示：

!!!
html

    head
        title= title || 'Title not set.'

    body
        #header
            h1 Header.

        #content!= body //- this renders the body of an individual view

        #footer
            p Footer.

例如，以下索引页：

p Welcome to the front page.

p This page serves as a now.js test.

这很好。但是，我现在要包括两个专门用于此索引页面的客户端javascript库（因此不是每个页面，因此不能将其放在布局的开头）。

这有效：

//- import jquery
script(type='text/javascript', src='./jquery-1.5.2.min.js');

//- import now.js (hosts itself)
script(type='text/javascript', src='/nowjs/now.js')

//- import the chat client
script(type='text/javascript', src='./indexChatClient.js')

p Welcome to the front page.

p This page serves as a now.js test.

但是，这会将脚本加载到整个页面的正文中，这是无效的HTML，对吗？

据我所知，如果我想正确执行脚本，则应该将其加载到头部，但是头部由布局文件处理。

那么，我如何适当地包含专门用于特定视图/页面的这些客户端javascript库？

Answer 1

使用此线程的解决方案，我已经完成了相同的操作：

http://groups.google.com/group/express-
js/browse_thread/thread/8c2006dc7bab37b1/f9a273c836e0a2ac

您可以在视图选项中声明一个“脚本”变量：

app.js：

app.set('view options', { locals: { scripts: ['jquery.js'] } });  // You can declare the scripts that you will need to render in EVERY page

比起拥有一个可以将脚本标签呈现到版面标题中的助手来说，

renderScriptTags（）辅助代码：

app.helpers({ renderScriptTags: function(scripts) {
  return scripts.map(function(script) {
    return '<script src="scripts/' + script + '"></script>';
  }).join('\n ');

在头部分的布局模板中，您将具有：

- renderScriptTags(scripts)

现在，要在head标签上添加脚本，只需要将脚本推入玉内容模板（body模板）上的“ scripts”变量中即可：

- scripts.push('myscript.js');

这样，页面会将jquery.js和myscript.js呈现到页面的顶部

更新

似乎最新的快速版本以不同的方式处理本地人，要使其正常工作，您可以执行此操作（虽然我不确定这是否是最佳解决方案，但我需要对此进行一点研究）

您可以像以前一样在布局模板中使用前一种方法的 renderScriptTags（） 帮助器。

但是不要将scripts变量设置为locals，而是创建一个动态帮助程序，该 脚本 将使 scripts 变量在我们的模板中可用：

app.dynamicHelpers({
  scripts: function(req, res){
    return ['jquery.js']; //this will be available in all views
  }
});

然后，从您的正文模板添加一个特定的脚本（与之前完全一样）：

- scripts.push('myscript.js');

现在，对于此特定视图，应该正确呈现jquery.js和myscript.js