service worker 中的 pug 模板引擎

Question

我使用以下命令编译了一个哈巴狗模板 temp1.js。

pug --client --no-debug temp1.pug

编译后的文件包含一个名为 template 的函数。我想知道如何在我的 service worker 中使用这个文件。表示如何调用这个函数。有什么办法可以更改函数名称吗

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

要使用 template 函数，请在您的页面中包含 temp1.js，然后调用 template()，这将呈现一个 HTML 字符串，您可以将其附加到 DOM:

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

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

</script>

我用来生成 temp1.js 的 temp1.pug 模板文件有一个只有一个变量的数据模型，templateName。 temp1.pug 模板文件的数据模型可能有多个变量或 none。

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

模板函数名称

如果您想在生成 temp1.js 时更改模板函数名称，请使用 --name 选项：

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

然后您将调用 myTemplate({/* ... */}) 以在您的页面中呈现 HTML。

示例：Pug Template Function

service worker 中的 pug 模板引擎

pug template engine in service worker

javascript

service-worker

progressive-web-apps

pug