7

使用 Pug 过滤器和 jsTransformer-handlebars 模块，我尝试将一些车把代码插入到将使用本地人的 pug 模板中。然而，由于 Pug 在编译时渲染过滤器，我们不能使用模板本地。所以我想知道让 jsTransformer 在浏览器上可用是否会解决这个问题，如果是这样，如何打包 jsTransformer-handlebars 模块并使其在浏览器上可用。

我有以下通常与车把一起使用的辅助函数：

// helpers.js
module.exports = {
  truncate: (str, len) => {
    //code
    return str;
  },

  stripTags: (input) => input.replace(/<(?:.|\n)*?>/gm, ""),

  formatDate: (date, format) => moment(date).format(format),

  select: function(selected, options) {
    return options
      .fn(this)
      .replace(new RegExp(` value="${selected}"`), '$&selected="selected"')
      .replace(new RegExp(`>${selected}</option>`), 'selected="selected"$&');
  },
};

helpers.js在app.js中导入，函数设置为应用程序变量。它们都可以在哈巴狗中使用，除了select().

// sets application locals so I can call these functions from a pug template
app.locals = {
  truncate,
  stripTags,
  formatDate,
  select,
};

例如，任何 pug 模板中的以下代码按预期返回格式化的日期：

#{formatDate(story.date, 'MMMM Do YYYY')}

但是，当尝试使用 select 功能时：

select(name='status' id='status')
  #{select(story.status)}
    option(value='Public' selected) Public
    option(value='Private') Private
    option(value='Unpublished') Unpublished
label(for='status') Status

给出中断错误：

无法读取未定义的属性“fn”

这很可能是因为我无法像通常在车把中那样传递 options 参数：

<select name ='status' id='status'>
  {{#select story.status}}
    <option value='Public' selected> Public </option>
    <option value='Private'> Private </option>
    <option value='Unpublished'> Unpublished </option>
  {{#/select}}

我使用车把运行了上述程序，它按预期工作。

我的下一个解决方案是使用哈巴狗过滤器将车把代码插入哈巴狗。但是，当尝试这样做时，变量不会在过滤器中生成。当然，这是因为 pug 在编译时呈现过滤后的代码，因此变量/局部变量永远不会传递到把手代码中。

Pug 在他们的文档中对此有警告

警告
过滤器在编译时呈现。这使它们速度很快，但这也意味着它们不能支持动态内容或选项。

默认情况下，浏览器中的编译无法访问基于 JSTransformer 的过滤器，除非 JSTransformer 模块被显式打包并通过 CommonJS 平台（例如 Browserify 或 Webpack）提供。实际上，您现在正在阅读的页面使用 Browserify 使过滤器在浏览器中可用。

在服务器上预编译的模板没有这个限制。

尽管我目前有一个解决方法，但我真的很想让这个助手与哈巴狗一起工作。我并不特别需要能够将 locals 变量传递到车把过滤器中，因为这可能是不可能的。但是，也许我在哈巴狗身上缺少一些东西可以让select()助手工作？

我真的希望我在哈巴狗中遗漏了一些简单的东西，可以让select()助手工作，或者有一种方法可以让本地人从过滤器中访问。但是，作为一个新手，任何帮助表示赞赏！

4

0 回答 0