テンプレート内の別のファイルからPugを呼び出す

Question

私はこの問題をほぼ4時間は解決できません。この種の問題のための参考資料はありません。

/** 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

生のHTMLのように、JSを別の部分で実行したい場合は、使用するjsを囲むスクリプトタグが必要です。

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

Answer 2

これを処理する方が良いかもしれませんが、通常は外部モジュールを読み込んでテンプレートコンテキストオブジェクトの一部として渡します。それはのようなものでなければなりませんテンプレートをレンダリングするコード意味：今

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 3

あなたは .scriptタグでJavaScriptを書くことができます

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