【问题标题】:How can a Jade template use client-side global variables?Jade 模板如何使用客户端全局变量?
【发布时间】:2013-07-08 22:29:30
【问题描述】:

假设我打开了一个浏览器,并在 JavaScript 中声明了一个全局变量。

window.myGlobalVar = 'Hello!';

然后,我为使用该变量的客户端渲染编译了一个翡翠模板。

.foo= myGobalVar

我是这样编译的:

jade.compile('.foo= myGobalVar', {
  client: true,
  compileDebug: false
}).toString()

产生这个模板函数:

function anonymous(locals) {
    var buf = [];
    var locals_ = (locals || {}),
        myGobalVar = locals_.myGobalVar;
    jade.indent = [];
    buf.push("\n<div class=\"foo\">"
             + (jade.escape(null == (jade.interp = myGobalVar) ? "" : jade.interp))
             + "</div>");;
    return buf.join("");
}

运行时会产生:

<div class="foo">undefined</div>

如您所见,jade 编译器注意到我使用了一个变量,并通过myGobalVar = locals_.myGobalVar; 将其强制为局部变量,这掩盖了我实际要使用的全局变量。

所以我尝试引用window.myGlobalVar 和jade 然后只是隐藏window

为什么不直接传入我想使用的每个全局变量?那么在运行时我不确定需要什么全局变量。我有几十个全局构造函数,并且显式传递它们将需要相当多的重构。

那么,如何让客户端的翡翠模板编译成允许引用 glbal 变量的方式?


更新:

我确实成功了。

for (key in window) {
  if (localsObject[key] == null)
    localsObject[key] = window[key];
  }
}

renderTemplate(localsObject);

但该死的,这会让我觉得自己很肮脏吗……肯定有更好的方法吗?

【问题讨论】:

  • (只关注myGobalVar vs myGlobalVar

标签: javascript pug


【解决方案1】:

您可以将要在jade模板中使用的全局变量的名称与选项对象一起传递给编译函数。查看jade api文档:http://jade-lang.com/api/

jade.compile(template, { globals: ['globalone','globaltwo']})

查看这个小提琴以查看它的实际效果:http://jsfiddle.net/lchngr/J5WJb/5/

【讨论】:

  • 你的fiddle没有jade文件
  • 没有玉文件!玉码是字符串。请再看看小提琴并重新考虑你的否决票。但是导入的 momentjs 库的链接已损坏。我更新了提琴手链接
猜你喜欢
  • 2011-09-28
  • 1970-01-01
  • 2012-11-28
  • 2014-04-09
  • 1970-01-01
  • 1970-01-01
  • 2019-05-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多