pugテンプレートエンジンin service worker

Question

以下のコマンドを使用して、pugテンプレートtemp1.jsをコンパイルしました。

パグ--client --no-デバッグtemp1.pug

コンパイルされたファイルは、テンプレート .Iは私のサービスワーカーにこのファイルを使用する方法を知りたいという名前の関数が含まれています。この関数を呼び出す方法を意味します。関数名を変更する方法はありますか？

temp1.js

function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_html = pug_html + "\u003C!DOCTYPE html\u003E\u003Chtml\u003E\u003Chead\u003E\u003Cmeta charset=\"utf-8\"\u003E\u003Cmeta http-equiv=\"content-language\" content=\"en\"\u003E\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no\"\u003E\u003Cmeta name=\"format-detection\" content=\"telephone=no\"\u003E\u003C\u002Fhead\u003E\u003Cbody\u003E\u003Cdiv class=\"mfw pDDetail\" id=\"buyPage\" data-role=\"page\"\u003E\u003Cdiv class=\"mfw\"\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"imgGal wd100 lf tc\"\u003E\u003Cdiv id=\"mobilePdGal\"\u003E\u003Cul active=\"0\" style=\"transform: translateX(0px)\"\u003E\u003Cli style=\"display:inline-block;position:relative\"\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"firstFold dp\" id=\"pHeaderId\"\u003E\u003Cdiv class=\"price-n-project\"\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fbody\u003E\u003C\u002Fhtml\u003E";;return pug_html;} 

Answer 1

あなたがDOMに追加することができますHTML文字列を描画なる、template()を呼び出して、あなたのページにtemp1.jsを含めるtemplate機能を使用するには：

<script src="temp1.js"></script> 
<script> 

    var model = { templateName: 'Template 1' }; 
    var html = template(model); 
    $('body').append(html); 

</script> 

temp1.jsを生成するために使用したtemp1.pugテンプレートファイルには、 delは単一の変数、templateNameである。 temp1.pugテンプレートファイルのデータモデルには、複数の変数がある場合も、まったく存在しない場合もあります。

// temp1.pug 
p This is #{templateName} 

テンプレート関数名

あなたはtemp1.jsが--nameオプションを使用生成するように、テンプレート関数名を変更したい場合は：あなたが次に

pug --client --no-debug temp1.pug --name "myTemplate"

をだろうに電話するあなたのページのHTMLをレンダリングする。

例：Pug Template Function