Question

近四个小时我无法解决这个问题，我找不到任何有用的文档来解决这类问题。这是问题，我正在使用pug / jade模板，我想在pug模板中调用函数来转换一些数据这是主要模板：

 /** main template */
section
  each pet in pets
    .pet
      .photo-column
        img(src= pet.photo)
      .info-column  
        h2= pet.name 
        span.species= (pet.species)
        p Age: #{calculateAge(pet.birthYear)} //here I need to call calculateAge function
        if pet.favFoods
          h4.headline-bar Favorite Foods
          ul.favorite-foods
            each favFood in pet.favFoods
              li!= favFood
/** end main template **/

这是外部功能：

/** calculateAge.js **/

 module.exports = function(birthYear) {
   var age = new Date().getFullYear() - birthYear;

   if (age > 0) {
     return age + " years old";
   } else {
     return "Less than a year old";
   }
 };
/** end calculateAge.js **/

我采取了哪些措施来实现这一目标？

Answer 1

可能有更好的方法来处理这个问题，但我通常是通过导入外部模块然后将其作为模板上下文对象的一部分传递来实现的。这意味着呈现模板的代码应该是：

const calculateAge = require("calculateAge"); // change path accordingly

router.get("/main", function(){
  let pageInfo = {};
  pageInfo.title = "Demo";
  pageInfo.calculateAge = calculateAge;
  res.render("main", pageInfo);
});

现在，您可以在模板中访问calculateAge。如果在大多数模板中大量使用此模块，那么您应该将其作为res.locals或app.locals的一部分传递，以便它可用于所有模板，而无需为每个路径请求附加它

Answer 2

与原始HTML一样，如果你希望JS在一个特定的部分执行，你需要一个脚本标记来包含你想要使用的js。

 span.species= (pet.species)
 p Age:
     .script 
         calculateAge(pet.birthYear) 
 if pet.favFoods

Answer 3

在PUG选项中，使用locals属性导入要在模板中使用的功能。

const calculateAge = require('./calculate-age');

const config = {
  pug: {
    locals: {
      calculateAge,
    },
  },
};

然后您可以在所有模板中使用它（请注意额外的转义标记!{}）：

p Age: !{calculateAge(pet.birthYear)}

Answer 4

您可以使用 .script 标记

编写javascript

 script.
   $( document ).ready(function() {
   calculateAge(params)
 })

Pug从模板内的另一个文件调用js函数

4 个答案: