9

JavaScript テンプレート ライブラリとしてHogan.JSを使用します。外部ファイルから JavaScript テンプレートをロードすることになっています。おそらく、外部 JavaScript ファイルでいくつかのテンプレートを外部委託することができます。

誰もそれを行う方法を知っていますか?

次のコードサンプルがあります。

<!DOCTYPE html>
<html>
  <head>
    <title>Hogan.JS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/hogan-2.0.0.min.js"></script>
    <script id="scriptTemplate" type="text/mustache">
      <p>Your text here: {{text}}</p>
    </script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      var template = $('#scriptTemplate').html();
      var compiledTemplate = Hogan.compile(template);
      var renderedTemplate = compiledTemplate.render(data);

      var box = document.createElement('div');
      box.innerHTML = renderedTemplate;
      document.body.insertBefore(box,document.body.childNodes[0]);
    </script>
  </body>
</html>

ID を使用してテンプレートに対処できますが、常に別のインライン スクリプトが必要です。:-(

これは外部ファイルでどのように機能しますか?

4

3 に答える 3

28

外部テンプレートをロードするには、次の 2 つのオプションがあります。

  1. テンプレートの事前コンパイル (Hogan.js IMHO の最高の機能) または
  2. require.jsのテキスト プラグインを使用してテンプレート文字列をロードする

残念ながら、Hogan.js テンプレートをプリコンパイルするためのドキュメントは存在しません。Github リポジトリのコピーがある場合は、ディレクトリ内にジョブを実行binするスクリプトが呼び出されます。nodejsといくつかのnpmモジュール (つまりおよび) がインストールされているhulk必要があります。noptmkdirp

これらのモジュールをインストールしたらnodejs、テンプレート ファイル Test.hogan を指定します。

<p>Your text here: {{text}}</p>

次のコマンドを使用して、スクリプトをプリコンパイルできます。

hulk Test.hogan

次のテキストが生成されます。

if (!!!templates) var templates = {};
templates["Test"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<p>Your text here: ");t.b(t.v(t.f("text",c,p,0)));t.b("</p>");return t.fl(); },partials: {}, subs: {  }});

これを という名前のファイルに保存します。templates.js

HTML ページでそのファイルをロードすると、コンパイルされたテンプレート関数がキー "Test" にtemplates.jsあるグローバル オブジェクトが作成されます。templatesこれはコンパイラであるため、hogan.jsファイルを省略して (テンプレートがプリコンパイルされているため) template.js、ディストリビューションに含まれるファイルのみを含めることもできます。

<!DOCTYPE html>
<html>
  <head>
    <title>Hogan.JS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/template.js"></script>
    <script src="js/templates.js"></script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      var compiledTemplate = templates['Test'];
      var renderedTemplate = compiledTemplate.render(data);

      var box = document.createElement('div');
      box.innerHTML = renderedTemplate;
      document.body.insertBefore(box,document.body.childNodes[0]);
    </script>
  </body>
</html>

注:master Github リポジトリの現在のブランチを使用すると、2.0.0 テンプレート バージョンで使用されているものとは異なるコンストラクターを使用するテンプレートが生成されたため、いくつかの問題が発生しました。使用する場合はhulk、必ずフォルダtemplate.jsにあるファイルを使用してlibください。

または、require.js とテキスト プラグインを使用することもできます。それらをダウンロードして、jsフォルダーに保存します。require次に、テンプレート テキストをロードするステートメントを追加する必要があります。

<!DOCTYPE html>
<html>
  <head>
    <script src="js/hogan-2.0.0.js"></script>
    <script src="js/require.js"></script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      require(['js/text!Test.hogan'], function(testHoganText) {
        // testHoganText contains the text of your template
        var compiled = Hogan.compile(testHoganText);
        var renderedTemplate = compiled.render(data);

        var box = document.createElement('div');
        box.innerHTML = renderedTemplate;
        document.body.insertBefore(box,document.body.childNodes[0]);
      });
    </script>
  </body>
</html>
于 2013-02-07T23:53:32.340 に答える
0

私は同じ質問を持っていて、Phuong とは異なるやり方で終わったので、それを共有したいと思いました.

サーバー側では、テンプレートをコンパイルし、次のスクリプトを使用してファイルに保存します。

// template will be a string
var template = hogan.compile(
    '<span>{{text}}</span>',
    { asString: true }
);

// prepare the content of the file we are about to create
var content =
    'if(!templates) var templates = {};' +
    'templates.example = ' + template + ';';

// write to a file that will be called by the client
fs.writeFile('compiledTemplate.js', content, function(err){
    if(err){ console.log('Oops !') }
});

クライアント側では、次のことを行います。

<!DOCTYPE html>
<html>
  <head>
    <script src="js/hogan-2.0.0.js"></script>
    <script src="js/compiledTemplate.js"></script>
  </head>
  <body>
    <script>

      var data = {
        text: 'Hello World'
      };

      var template = new Hogan.Template(templates.example),
          html = template.render(data);

      var box = document.createElement('div');
      box.innerHTML = html;
      document.body.insertBefore(box,document.body.childNodes[0]);

    </script>
  </body>
</html>

私はそれが役立つことを願っています!

于 2014-06-06T20:24:47.573 に答える