web-dev-qa-db-ja.com

テンプレート内の別のファイルからのパグ呼び出しjs関数

私はこれをほぼ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 **/

これを実現するために私はどのシェルを使用しますか？

javascripttemplatespug
7
Ilija Bradaš

これを処理するためのより良い方法があるかもしれませんが、私は通常、外部モジュールをインポートし、それをテンプレートコンテキストオブジェクトの一部として渡すことによってそれを行います。つまり、テンプレートをレンダリングするコードは次のようになります。

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の一部として渡す必要があります。これにより、すべてのパスリクエストに追加することなく、すべてのテンプレートで使用できるようになります。 。

4
Mohit Bhardwaj

PUGオプションでは、localsプロパティを使用して、テンプレート内で使用する関数をインポートします。

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

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

次に、このようにすべてのテンプレートで使用できます（余分なエスケープ解除タグ!{}に注意してください）：

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

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

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