shortHbs Handlerbarsライブラリ

shortHbs$$.js

このサイト独自の Handlerbarsライブラリです

解説

~~ 自作ライブラリ shortHbs$$.js ~~
  • BulmaでHandlerbarsを利用するために、このWebサイトでは
     shortHbs$$.jsというライブラリを使います。

    特徴

    BulmaをHandlebarsで適用するとき Javascriptを短い名前で利用します
    これらのエイリアス(ショートカット名)はできるだけ小数に限定
    Handlebarsの特定の機能を実現する関数も追加
    例:$$qtFnqT('#template', v, '#target')等

    使い方

    shortHbs$$.js

    • globalで使える環境で利用
    • 使い方の例:<script src="/src/js/shortHbs$$.js"></script>
    • headタグ内に挿入。但し、pathは状況によって変わります。

class="has-text-warning-dark"

shortHbs$$.js のソースコード

// shortHbs$$.js

// ~~ Handlebars ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const $$hFn = (html) => Handlebars.compile(html);
const $$tFn = (Ttag) => Handlebars.compile(Ttag.innerHTML);
const $$qtFn = (ht) => {
  return Handlebars.compile($$q(ht).innerHTML)
};

const $$hFnC = (html, context) => Handlebars.compile(html)(context);
const $$hFnT = (html, v, trgt) =>
  (trgt.innerHTML = Handlebars.compile(html)(v));
const $$hFnqT = (html, v, trgt) =>
  $$q(trgt).innerHTML = Handlebars.compile(html)(v);

const $$qtFnqT = (ht, v, trgt) => {
  // console.log("$$qtFnqT -> $$qtFn(ht)(v)", $$qtFn(ht)(v))
  $$q(trgt).innerHTML = $$qtFn(ht)(v)
};
const $$d_qFnT = (ht, v, trgt) => {
  $$de(() => {
    $$qtFnqT(ht, v, trgt);
  });
};

const $$tPre = (handlebars) => Handlebars.templates[handlebars];

const $$tPreqT = (handlebars, v, trgt) => ($$q(trgt).innerHTML = $$tPre(handlebars)(v));
const $$d_qPreT = (handlebars, v, trgt) => {
  $$de(() => {
    $$tPreqT(handlebars, v, trgt);
  });
};

const $$preFnqT = (preFn, v, trgt) =>
  $$q(trgt).innerHTML = preFn(v);

const $$rPar = (na, html) => Handlebars.registerPartial(na, html);
const $$d_rPar = (na, html) => {
  $$de(() => {
    $$rPar(na, html);
  });
};

const $$rParFn = (na, fn) => Handlebars.registerPartial(na, fn);
const $$d_rParFn = (na, fn) => {
  $$de(() => {
    $$rParFn(na, fn);
  });
};

const $$rHS = (na, html) =>
  Handlebars.registerHelper('print_person', () => {
    return new Handlebars.SafeString(html);
  });

const $$d_rH = (na, html) => {
  $$de(() => {
    $$rH(na, html);
  });
};                

解説

~~ Handlebars の利用 ~~
  • BulmaとHandlebarsを利用するとき、このWebサイトでは
     shortHbs$$.js
    というライブラリを使います。
  • 使い方の例:<script src="/src/js/shortHbs$$.js"></script>
    headタグ内に挿入。但し、pathは状況によって変わります。
  • 例えば、Dropdown$$.htmlとshortHbs$$.jsが同じフォルダにある時は
    <script src="./shortHbs$$.js"></script> または
    <script src="shortHbs$$.js"></script> となります。

  • 以下に、いくつかの例を解説をしますが、基本的には標準のJavascriptのショートカットです。

  • $$hFn(html)
    htmlコードをコンパイルし、コンテキストvを引数とする関数を返します。
    $$tFn(Ttag)
    テンプレートタグTtagのhtmlコードをコンパイルし、コンテキストvを引数とする関数を返します。
    $$qtFn(ht)
    セレクタhtを持つテンプレートタグのhtmlコードをコンパイルし、コンテキストvを引数とする関数を返します。
    $$hFnC(html, context)
    htmlコード文字列をコンパイルし、得られた関数にコンテキストcontextを渡し実行します。
    $$hFnqT(html, v, '#target')
    htmlコードをコンパイルし、コンテキストvを適用して得られたHTMLコードを、要素#targetのinnserHTMLプロパティに代入する。
    $$qtFnqT('#template', v, '#target')
    テンプレート#templateをコンパイルし、コンテキストvを適用して得られたHTMLコードを、要素#targetのinnserHTMLプロパティに代入する。
    $$tPre(handlebars)
    プリコンパイルしたファイル名handlebarsから、コンテキストvを引数とする関数を返します。
    $$tPreqT(handlebars, v, trgt)
    プリコンパイルしたファイル名handlebarsから関数を取得し、引数コンテキストvを与え、得られたHTMLコードを、セレクタtrgtを持つ要素のinnserHTMLプロパティに代入します。
    $$preFnqT(preFn, v, trgt)
    プリコンパイルした関数に引数コンテキストvを与え、得られたHTMLコードを、セレクタtrgtを持つ要素のinnserHTMLプロパティに代入します。
    $$rPar(na, html)
    Partial関数を、htmlを使って作成します。
    $$rHS(na, html)
    Helper関数naを、htmlを使ってnew Handlebars.SafeString(html)で登録します。