玉模板内的javascript函数执行

Posted 2023-02-22

【中文标题】玉模板内的javascript函数执行

【英文标题】：javascript function execution inside jade template

【发布时间】：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) 客户端？

谢谢

【参考方案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')

在哪里

语言

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