玉模板内的javascript函数执行答案

【问题标题】：javascript function execution inside jade template玉模板内的javascript函数执行
【发布时间】：2014-01-23 07:39:54
【问题描述】：

我是 nodejs 的新手，正在尝试为 html 内容 myfile.jade 创建一个玉文件：以下是文件内容：

extends layout
block content
   script
     function capitalize(s) { 
       console.log("Testing js exec");
       return s.charAt(0).toUpperCase() + s.slice(1); 
     };
  table
    - each item in list
      tr
        td
          a(href="/collection/#{item.name}") #{capitalize(itemName)}

但是，运行时会抛出以下错误：

Error: mweb/views/collections.jade:8
    6|   script
    7|     function capitalize(s) { 
  > 8|       console.log("Testing js exec");
    9|       return s.charAt(0).toUpperCase() + s.slice(1); 
    10|     };

unexpected text ;

如果我删除 console.log，它会抛出错误：

TypeError: mweb/views/collections.jade:18
  > 18|             a(href="/collection/#{item.name}") #{capitalize(itemName)}

据我所知，在jade编译期间正在调用capitalize，并且该功能不可用，因为脚本标签也被编译到html中。对我来说评估此电话的最佳方式是什么 a) 服务器端或 b) 客户端？

谢谢

【问题讨论】：

标签： javascript node.js express pug

【解决方案1】：

你需要在jade范围内定义函数，而不是在你生成的JS中：

block content
   -  function capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1); };
  table
    - var list = ['one', 'two']
    - var itemName = 'test test'
    - each item in list
      tr
        td
          a(href="/collection") #{capitalize(itemName)}

但最好将它放在模板之外并将引用传递给辅助对象

【讨论】：

谢谢。这样可行。您介意提供有关如何使用帮助程序的任何参考吗？
没有特殊的助手库。我将用户提供的功能称为“助手”。渲染模板时，您将对象作为输入传递，并与数据一起传递对帮助器/实用程序函数的引用
Is 有办法要求它吗？喜欢- var CircularJSON = require('circular-json')？（
在模板之外需要它。或者，您实际上可以将“require”的引用传递给您的模板上下文，并从 Jade 代码中使用它。 require没有魔法，只是一个普通的javascript函数
@BijayKushawaha 不，您需要在开始渲染之前为您的模板提前准备好所有数据，我不知道jade/pug中有任何“并发”渲染模式。

【解决方案2】：

我意识到这真的很老了，但是当你在jade中声明一个函数时，你需要这样做

script.

不是

script

句号会有所不同，它会让 Jade 意识到它实际上是一段代码，而不是 HTML。

【讨论】：

【解决方案3】：

通过这个#{capitalize(itemName)}，您正在尝试调用从控制器（后端）传递给模板的函数。

例如(/routes/index.js)：

res.render('index', { title: 'Express test', fs : { echo : lang} });

在index.jade中

 a(href='/register') #{fs.echo('xxx')}

在哪里

语言

是一个前面定义的函数，它带有一些参数。

【讨论】：