如何在 Jade 编译之前在 Jade 模板中包含 Javascript 对象

Question

我正在使用 Jade/Express 构建的网站工作了几周。我最近为网站整理了图片文件夹，因此所有图片都在几个文件夹之间分配，以便于使用和分类。

为了更容易更改图像（和其他此类文件）的层次结构，我编写了一个脚本，其中包含一些文件路径的全局变量。现在我一直在尝试让脚本运行，以便我可以调用翡翠模板中的函数来自动使用这些全局变量。

例如。图像现在被分类到几个文件夹中：

文件层次结构

img/
    glyphs/
    interactivity/
        buttons/
    ...

在我的路径管理器脚本中，我创建了几个函数，包括：

在：path-manager.js

 images_root_path = "/img/";
 glyph_path = images_root_path + "glyphs/";
 function getGlyph(color, name) {
     return glyph_path + color + "/" + name;
 }

我尝试了几种方法让脚本在模板之前执行。这是其中一种尝试：

在page.jade

include ../../../public/js/lib/path-manager.js
=NamespacePathManager();

上面是理论上应该包含js然后我执行下面的命名空间使功能可用，但这不起作用。

这是我想在其中使用函数的 Jade 模板的一部分：

在page.jade 脚本后包含

span.challenge-time
   img(src=getGlyph("black","stopwatch.png"), style="margin-right:5px;")

上面的例子应该返回："/img/glyphs/black/stopwatch.png"

问题是，我相信，我试图让翡翠模板在服务器端可用的脚本在渲染翡翠模板之前没有被执行。我为使其正常工作所做的一切尝试总是导致错误提示服务器无法识别函数 getGlyph 或者当我开始使用命名空间函数时，NamespacePathManager

总结： 我希望在将翡翠模板渲染到网页之前执行一个 javascript 文件，以便在渲染翡翠模板时从服务器上的该 javascript 调用函数和变量以使用。我的问题是我尝试过的所有方法都无法在 Jade 渲染之前执行 javascript。

更新 我发现的一种解决方法是将 javascript 直接放入页面上的无缓冲代码中，包括一个玉。这不是我一直在寻找的优雅解决方案，但它现在可以工作

- some code
- more code

此代码是内联执行的。缺点是我必须手动将它包含在每个页面上 - 而不是只包含一次并让功能随处可用。

Answer 1

您可以在 Express 中注册 helper 方法，然后可以在视图中访问这些方法。

因此，在您的情况下，path-manager.js 可以是您注册的帮助文件，并且包含：

var images_root_path = "/img/";
var glyph_path = images_root_path + "glyphs/";

exports.helpers = {
  getGlyph: function (color, name) {
    return glyph_path + color + "/" + name;
  }

  // Other helper methods here..
};

然后在设置 express server 的时候，注册 helper

var app = express.createServer();

// app.configure here...
//   app.use ...

app.helpers(require('./path-manager.js').helpers);

// Routes set up here ..

最后，您可以像这样从 Jade 视图调用辅助方法：

span.challenge-time
  img(src='#{getGlyph("black","stopwatch.png")}', style='margin-right:5px;')

DailyJS http://dailyjs.com/2011/01/03/node-tutorial-8/ 上有一篇关于这个主题的好文章