0

我正在尝试在浏览器中为 Nodejs 使用 Swig 模板。

要求：

我需要使用 Swig CLI 在我的预编译模板中使用自定义过滤器。

问题：

我的编译结果没有自定义过滤器功能，并且出现错误（下面的第 5 步）。

我所做的步骤

1-编译模板

模板：

<span>{{ item.sampleProperty|customFilterTwo }}</span>

过滤器文件 [filters.js]：

module.exports = {
    customFilterTwo: function(sampleProperty) {
        return sampleProperty + " rocks!";
    }
}

命令痛饮 CLI：

swig compile ./views/macros/item.html > ./views/templates/item.js --filters=./views/filters/filters.js

2- 编译结果

var tpl = function (_swig,_ctx,_filters,_utils,_fn) {
  var _ext = _swig.extensions,
    _output = "";
_output += "<span>";
_output += _filters["e"](_filters["customFilterTwo"]((((typeof _ctx.item !== "undefined" && _ctx.item !== null && _ctx.item.sampleProperty !== undefined && _ctx.item.sampleProperty !== null) ? ((typeof _ctx.item !== "undefined" && _ctx.item !== null && _ctx.item.sampleProperty !== undefined && _ctx.item.sampleProperty !== null) ? _ctx.item.sampleProperty : "") : ((typeof item !== "undefined" && item !== null && item.sampleProperty !== undefined && item.sampleProperty !== null) ? item.sampleProperty : "")) !== null ? ((typeof _ctx.item !== "undefined" && _ctx.item !== null && _ctx.item.sampleProperty !== undefined && _ctx.item.sampleProperty !== null) ? ((typeof _ctx.item !== "undefined" && _ctx.item !== null && _ctx.item.sampleProperty !== undefined && _ctx.item.sampleProperty !== null) ? _ctx.item.sampleProperty : "") : ((typeof item !== "undefined" && item !== null && item.sampleProperty !== undefined && item.sampleProperty !== null) ? item.sampleProperty : "")) : "" )));
_output += "</span>";

  return _output;

};

3- 在浏览器中加载 Swig 库和编译模板的 js

4-通过生成的函数tpl()使用编译好的js

var html = swig.run(tpl, { 'item': item });

5-运行时出现错误

TypeError: _filters.customFilterTwo is not a function

我知道我需要告诉 Swig 关于过滤器的事情，购买我想要一个完全独立的编译模板。我不想再告诉 Swig 这些过滤器。

我的解决方案：

我一直在研究如何做到这一点，并在 Swig 库中进行了一些修改来解决这个问题。

在 bin/swig.js 中，将第 129 行替换为：

// Compile any custom filters
var customFilters = "";
    if (argv.filters) {
      utils.each(require(path.resolve(argv.filters)), function (filter, name) {
        customFilters += "_filters['" + name + "'] = " + filter + ";\n";
      });
    }

    var r = swig.precompile(str, { filename: file, locals: ctx, customFilters: customFilters }).tpl.toString().replace('anonymous', '');

在第 486 行的 lib/swig.js 中添加：

options.customFilters + '\n' +

并且编译的 js 的结果现在具有提供的过滤器：

var tpl = function (_swig,_ctx,_filters,_utils,_fn) {
    var _ext = _swig.extensions,
    _output = "";
    _filters["customFilterTwo"] = function(sampleProperty) {
        return sampleProperty + " rocks!";
    };
    _output += "<span>";
    _output += _filters["e"](_filters["customFilterTwo"]((((typeof _ctx.item !== "undefined" && _ctx.item !== null && _ctx.item.sampleProperty !== undefined && _ctx.item.sampleProperty !== null) ? ((typeof _ctx.item !== "undefined" && _ctx.item !== null && _ctx.item.sampleProperty !== undefined && _ctx.item.sampleProperty !== null) ? _ctx.item.sampleProperty : "") : ((typeof item !== "undefined" && item !== null && item.sampleProperty !== undefined && item.sampleProperty !== null) ? item.sampleProperty : "")) !== null ? ((typeof _ctx.item !== "undefined" && _ctx.item !== null && _ctx.item.sampleProperty !== undefined && _ctx.item.sampleProperty !== null) ? ((typeof _ctx.item !== "undefined" && _ctx.item !== null && _ctx.item.sampleProperty !== undefined && _ctx.item.sampleProperty !== null) ? _ctx.item.sampleProperty : "") : ((typeof item !== "undefined" && item !== null && item.sampleProperty !== undefined && item.sampleProperty !== null) ? item.sampleProperty : "")) : "" )));
    _output += "</span>";

      return _output;

    };

现在脚本是完全独立的，不需要将过滤器添加到 swig 中。

我希望我已经解释得足够好。对不起，我的英语不好。

我用大炮杀死苍蝇？？还有另一种更简单的方法来解决这个问题吗？

提前致谢

4

1 回答 1

0

第 4 步中的 swig 实例还需要了解您的过滤器。

swig.setFilter('customFilterTwo', customFilterTwoMethod);
var html = swig.run(tpl, { 'item', item })
于 2014-08-01T20:31:48.603 回答