Question

我试图在浏览器中使用Swig模板进行Nodejs。

要求：

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

问题：

我的编译结果没有自定义过滤器功能，我收到错误（下面的步骤5）。

我已经完成的步骤

1-编译模板

模板：

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

过滤文件[filters.js]：

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

命令swig 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中。

我希望我已经解释得很好。抱歉我的英语不好。

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

提前致谢

Answer 1

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

swig.setFilter('customFilterTwo', customFilterTwoMethod);
var html = swig.run(tpl, { 'item', item })

Swig模板CLI +浏览器使用+自定义过滤器

1 个答案: