我正在使用 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 模板提供可用的脚本在 Jade 模板渲染之前没有被执行。我为使其正常工作所做的一切尝试总是会导致错误,指出服务器无法识别函数 getGlyph 或当我开始使用命名空间函数 NamespacePathManager
摘要: 我希望在将 Jade 模板渲染到网页中之前执行一个 JavaScript 文件,以便我可以在渲染 Jade 模板时从服务器上的 JavaScript 调用函数和变量来使用。我的问题是,我尝试过的所有方法都无法在 Jade 渲染之前执行 javascript。
更新 我发现的一种解决方法是将 JavaScript 直接放入包含 jade 的页面上的无缓冲代码中。这不是我一直在寻找的优雅解决方案,但它现在有效
- some code
- more code
此代码内联执行。缺点是我必须手动将其包含在每个页面上 - 而不是只包含一次并让功能随处可用。
最佳答案
您可以在 Express 中注册帮助程序方法,然后可以在 View 中访问这些方法。
因此,在您的情况下,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服务器时,注册助手
var app = express.createServer();
// app.configure here...
// app.use ...
app.helpers(require('./path-manager.js').helpers);
// Routes set up here ..
最后,您可以从 Jade View 中调用辅助方法,如下所示:
span.challenge-time
img(src='#{getGlyph("black","stopwatch.png")}', style='margin-right:5px;')
DailyJS http://dailyjs.com/2011/01/03/node-tutorial-8/ 有一篇关于这个主题的很好的文章
关于javascript - 如何在 Jade 编译之前将 Javascript 对象包含在 Jade 模板中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10420990/