0

ブラウザーで Nodejs の Swig テンプレートを使用しようとしています。

要件：

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', '');

lib/swig.js の 486 行目に以下を追加します。

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