1

私は Sprockets を使用して Eco テンプレートをコンパイルし、それらを 1 つの JS ファイルとして連結して提供しています。

たとえば、次の 2 つのテンプレートがあるとします。

template1.jst.eco:

<b>Awesome template 1</b>

template2.jst.eco:

<b>Awesome template 2</b>

そして、Sprocketsrequireディレクティブを使用して、それらをファイルに含めます。

# example.coffee
#= require 'templates/template1'
#= require 'templates/template2'

html = JST['templates/template1']()
moreHtml = JST['templates/template2']()

コンパイル/連結された出力は次のexample.jsとおりです(警告、生成されたコードの長い部分):

(function() {
  this.JST || (this.JST = {});
  this.JST["templates/template1"] = function(__obj) {
    if (!__obj) __obj = {};
    var __out = [], __capture = function(callback) {
      var out = __out, result;
      __out = [];
      callback.call(this);
      result = __out.join('');
      __out = out;
      return __safe(result);
    }, __sanitize = function(value) {
      if (value && value.ecoSafe) {
        return value;
      } else if (typeof value !== 'undefined' && value != null) {
        return __escape(value);
      } else {
        return '';
      }
    }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
    __safe = __obj.safe = function(value) {
      if (value && value.ecoSafe) {
        return value;
      } else {
        if (!(typeof value !== 'undefined' && value != null)) value = '';
        var result = new String(value);
        result.ecoSafe = true;
        return result;
      }
    };
    if (!__escape) {
      __escape = __obj.escape = function(value) {
        return ('' + value)
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          .replace(/"/g, '&quot;');
      };
    }
    (function() {
      (function() {

        __out.push('<b>Awesome template 1</b>\n');

      }).call(this);

    }).call(__obj);
    __obj.safe = __objSafe, __obj.escape = __escape;
    return __out.join('');
  };
}).call(this);
(function() {
  this.JST || (this.JST = {});
  this.JST["templates/template2"] = function(__obj) {
    if (!__obj) __obj = {};
    var __out = [], __capture = function(callback) {
      var out = __out, result;
      __out = [];
      callback.call(this);
      result = __out.join('');
      __out = out;
      return __safe(result);
    }, __sanitize = function(value) {
      if (value && value.ecoSafe) {
        return value;
      } else if (typeof value !== 'undefined' && value != null) {
        return __escape(value);
      } else {
        return '';
      }
    }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
    __safe = __obj.safe = function(value) {
      if (value && value.ecoSafe) {
        return value;
      } else {
        if (!(typeof value !== 'undefined' && value != null)) value = '';
        var result = new String(value);
        result.ecoSafe = true;
        return result;
      }
    };
    if (!__escape) {
      __escape = __obj.escape = function(value) {
        return ('' + value)
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          .replace(/"/g, '&quot;');
      };
    }
    (function() {
      (function() {

        __out.push('\n<b>Awesome template 2</b>\n');

      }).call(this);

    }).call(__obj);
    __obj.safe = __objSafe, __obj.escape = __escape;
    return __out.join('');
  };
}).call(this);
(function() {
  var html, moreHtml;

  html = JST['templates/template1']();

  moreHtml = JST['templates/template2']();

}).call(this);

この JS は正常に動作しますが、問題は、含まれている各テンプレートに対して Eco が生成するすべての補助的なテンプレート レンダリング関数が重複していることです。少数のテンプレートを含むプロジェクトでは、これらの補助関数のコードが実際のテンプレートのコードを上回ることは想像に難くありません。

補助機能を複製する代わりに再利用するように Srpockets/Eco を構成する方法はありますか?

4

0 に答える 0