Question

我正在使用Jade / Express构建的网站几周。我最近为网站组织了图像文件夹，所以所有图像都在几个文件夹之间分配，以便于使用和排序。

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

例如。图像现在分为几个文件夹：

文件层次结构

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”

问题是，我相信，在渲染玉器模板之前，我试图在服务器端为jade模板提供的脚本没有被执行。我试图让它工作的所有内容总是会导致错误，说服务器无法识别函数 getGlyph 或当我开始使用命名空间函数时， NamespacePathManager

摘要：我希望在将jade模板呈现到网页之前执行javascript文件，以便我可以在渲染jade模板时从服务器上的javascript调用函数和变量。我的问题是我尝试过的所有方法都无法在呈现Jade之前执行javascript。

更新我找到的一个工作是将javascript直接放在包含玉石的页面上的无缓冲代码中。这不是我想要的优雅解决方案，但它现在可以使用

- some code - more code

此代码以内联方式执行。缺点是我必须手动将它包含在每个页面上 - 而不是仅仅包含它一次并且在任何地方都可以使用这些功能。

Answer 1

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

因此，在您的情况下， 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..
};

然后在设置快速服务器时，注册帮助程序

var app = express.createServer();

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

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

// Routes set up here ..

最后，您可以从Jade视图中调用helper方法，如下所示：

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

在DailyJS http://dailyjs.com/2011/01/03/node-tutorial-8/

上有一个关于这个主题的好文章

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

1 个答案: