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

本文介绍了Node.js with Express：使用Jade视图中的脚本标签导入客户端javascript？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我有一个布局玉文件导入个人视图的主体像这样：

  !!! 
 html 
 
 head 
 title = title || '标题未设置'
 
 body 
 #header 
 h1标题。 
 
 #content！= body //  - 呈现个人视图的正文
 
 #footer 
 p页脚。

例如，以下索引页：

  p欢迎来到首页。 
 
 p此页面用作now.js测试。

这工作正常。然而，我现在想要为这个索引页面专门提供两个客户端JavaScript库（因此不是每个页面，这就是为什么我不能把它放在布局的头上）。

这样做：

  //  -  import jquery 
 script（type ='text / javascript' ，src ='。/ jquery-1.5.2.min.js'）; 
 
 //  -  import now.js（主机本身）
脚本（type ='text / javascript'，src ='/ nowjs / now.js'）
 
 //  - 导入聊天客户端
脚本（type ='text / javascript'，src ='。/ indexChatClient.js'）
 
p欢迎使用首页。 
 
 p此页面用作now.js测试。

但是，这将脚本加载到完整页面的正文，这是不正确的HTML ？

据我所知，如果我想要正确地执行脚本，那么脚本应该被加载到头部，但是头部是由布局文件来处理的。 / p>

那么，如何正确地将这些客户端JavaScript库专门用于特定的视图/页面？

解决方案

我使用此线程的解决方案也是一样的：

您可以在视图选项中声明一个scripts变量：

app.js：

  app.set（'view options'，{localals：{scripts：['jquery.js']}}） //您可以声明您需要在每个页面中呈现的脚本

您可以拥有帮助器将脚本标签放入布局的头部

renderScriptTags（）助手代码：

  app.helpers（{renderScriptTags：function（scripts）{
 return scripts.map（function（script）{
 return'< script src =scripts /'+ script +'>< / script>'; 
}）join（'\\\
'）;

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

   -  renderScriptTags（scripts）

现在，要在head标签上添加一个脚本，只需将脚本推入您的玉石内容模板（主体模板）的脚本变量：

   -  scripts.push（'myscript.js'）;

以这种方式，页面会将jquery.js和myscript.js呈现到页面的头部

更新

似乎最新的快递版本处理不同的本地人方式，使这个工作正常，你可以做到这一点（我不知道这是最佳的解决方案，但我需要挖一点）

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

但是不要将脚本变量设置为本地人，而是创建一个动态帮助器，这将使我们的模板中可以使用脚本变量：

 应用程序.dynamicHelpers（{
 scripts：function（req，res）{
 return ['jquery.js']; //这将在所有视图中可用
} 
}）;

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

   -  scripts.push（'myscript.js'）;

现在，对于这个具体的视图，你应该正确渲染jquery.js和myscript.js

I've got a node.js express server running with the Jade template engine.

I've got a layout jade file which imports the body of individual views like so:

!!!
html

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

    body
        #header
            h1 Header.

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

        #footer
            p Footer.

For example, the following index page:

p Welcome to the front page.

p This page serves as a now.js test.

This works fine. However, I now want to include two client-side javascript libraries specifically for this index page (and thus not very every page, which is why I cannot put it in the head of layout).

This works:

//- 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.

However, this loads the scripts to the body of the complete page, which is not valid HTML, right?

As far as I know, the scripts should be loaded into the head if I want to do it properly, but the head section is handled by the layout file.

So, how would I properly include these client-side javascript libraries specifically for a certain view/page?

解决方案

I've done the same using the solution from this thread:

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

You can declare a "scripts" variable into view options:

app.js:

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

Than you can have an helper that renders the script tags into the head of the layout

renderScriptTags() Helper code:

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

Into the layout template in the head section you will have:

- renderScriptTags(scripts)

Now, to add a script on the head tag, you'll just need to push the script into the "scripts" variable on your jade content template (body template):

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

In this way the page will render jquery.js and myscript.js into the head of the page

UPDATE

It seems that newest express version handles the locals in a different way, to make this work properly, you can do this (I'm not sure it is the optimal solution though, I'd need to dig this a little)

You can use the renderScriptTags() helper of the previous method in your layout template like before.

But don't set the scripts variables into locals, instead create a dynamic helper that will make a scripts variable available in our templates:

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

And then, to add a specific script, from your body template (exactly as before):

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

Now, for this specific view, you should have jquery.js and myscript.js rendered properly

这篇关于Node.js with Express：使用Jade视图中的脚本标签导入客户端javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！