javascript - Service Worker 中的哈巴狗模板引擎

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 模板文件的数据模型可能有多个变量或根本没有变量。

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

模板函数名称

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

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

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

示例:Pug Template Function