Pug(Jade)で役に立ったアレコレ

Pug(Jade)で役に立ったアレコレ

node.jsでviewを書く時にPugを使い始めました。
アレコレ実現までに時間がかかったものを忘れないように残しておきます。

scriptタグ内でNodeから渡された値を利用する①

res.renderでパラメータをviewに渡したときに、scriptタグ内で直接使おうとしたらうまくイカなかった。
js // node側の設定 res.render('sample',{ param1: _param1, param2: _param2 }) ````js //- sample.pugの記述 p(hidden='')#p1 #{param1} p(hidden='')#p2 #{param2}

script. let p1 = document.getElementById('p1').textContent; let p2 = document.getElementById('p2').textContent;

console.log('param1:' + _p1);
console.log('param2:' + _p2);

````

pタグをHidden属性で定義して、そのテキストに使いたいパラメータを定義する。
getElementByIdを使ってscript内でテキストを取得、変数に格納する、この2段階でscriptタグ内で変数が使えるようになりました。

scriptタグ内でNodeから渡された値を利用する②

画面ロード時に表を作りたかったので配列をnodeから渡す時に配列全体を文字列可してやろうとしたら"'・・・。

script.
  window.onload = () => {
    funcHoge(#{data});
  }

ちなみにdataの中身は配列です。

let data = ['a','b','c','d'];

ですがこのまま渡すと、シングルクォートなどの特殊文字がHTMLように変換されてしまいます。（それが"や'など）
ということで、pugで特殊文字を含む文字列を渡せるようにします。

script.
  window.onload = () => {
    funcHoge(!{data}); // # -> ! に変更
  }

さらにさらにこのままだと文字として展開されたあとにスクリプトを処理するので、配列全体を文字列化、変数に定義した後に関数にわたすことにします。

let data = ['a','b','c','d'];
data = '["' + data.join('","') + '"]';
// dataを　'["a","b","c","d"]'　のように文字列化する。

viewの呼び出し側で上記の通り１個の文字列として加工して、view側のpugで下記のように記述します。

script.
  window.onload = () => {
    let _data = !{data};
    // デコード後は　let _data = ["a","b","c","d"];　となる。
    funcHoge(_data);
  }

多次元配列の場合も同様に、個別にjoin()したあとに全体を文字列としてつなげます。
その際に、'["'　と　'"]'　は自前で追加しないとjoinでは消えてしまうため、入れるのをお忘れなきよう。

繰り返し処理にIndexをつかう

each ~ in　でリストなどを繰り返し処理（表化）するときに、選択した対象のIndex（行数）を取得したり、行をユニークに見分けたい。 ごくごく単純なことですが、下記の書き方で出来るようです。

  each value, index in values
  　～

例えば下記のようにして、セレクトボックスの選択しているパラメータが重複していないかチェックするのに利用しました。

  each value, index in values
    select(id=`index_${index}` name="id" onChange=`dupeCheck('index_${index}');`)
      each ...
        option(...)

細かいことは別記事にしますが、セレクトボックスごとにidを割り振り、値を変更したタイミングでdupeCheckで他の行で同じものが選択されていないかチェックしています。

雑記

特に困った（調べたり理解に時間がかかった）ものだけと思って書いてみたら意外と少ない。。。もっと色々悩んだはずなんですが、喉元すぎればってやつでしょうか。
忘れてるだけのものもありそうなので思い出し次第、また出くわし次第追記、出来たら良いなぁ。