5

コンパイル済みの handlebars.js テンプレートを手動で使用するには?

言ってみましょう、私たちは持っています

source = "<p>Hello, my name is {{name}}</p>"
data = { name: "Joe" }

現在、私は

template = Handlebars.compile(source)
render: -> template(data)

ソースはデータベースから取得されます。コンパイル時間を短縮するために、テンプレートサーバー側をプリコンパイルしてHandlebars.precompile(source)から次のようなものを使用して、コンパイル手順を使用したいと考えています。

template = precompiled_template
render: -> precompiled_template(data)

precompiled_template は関数定義を含む文字列であるため、機能しません。

また、私はそれを見つけましたがHanlebars.compile(source)() == Handlebars.precompile(source)、ハンドルバーのソースコードを閲覧した後、それはコンパイラとランタイムであり、これを達成する方法はまだわかりません.

4

2 に答える 2

4

今まで正しい質問が見つからなかった場合、答えは非常に簡単です。ハンドルバーには、コマンドラインにCプリコンパイラが付属しています。シェルにアクセスできる場合は、テンプレートをそれぞれ分離してコンパイルするか、1つのファイルにマージするだけです。

npm /を介してハンドルバーをインストールするか、システムに構築することができます。シェルでは、ヘルプファイルにアクセスできます

$>ハンドルバー[ENTER]

>--f--output出力ファイルなどのヘルプファイルが表示されます。--m--min出力の最小化

$>ハンドルバーmysupertemplate.handlebars-fcompiled.js-m（jsファイルを縮小する場合は "-m"）

ブラウザでHandlebars.compileを実行すると、パフォーマンスが大幅に低下するため、ファイルをブラウザに送信する前に、サーバーでプリコンパイルしてみる価値があります。

ハンドルバーテンプレートをブラウザに登録するには、次のようにロードする必要があります。

var obj = {"foo":"bar"}

var template = require("./mytemplate-file.js") // require.js example
    template = template(Handlebars) // Pass Handlebars Only if the template goes mad asking for his Father

var html = Handlebars.templates[template-name](obj)

たとえば、「templates-file」に複数のテンプレートが登録されている場合は、requireの後に、次を使用してすべてのテンプレートを名前で呼び出すことができます。

var html = Handlebars.templates["templateName"]({"foo":"bar"});

ファイル内にすべての既知のヘルパーを登録したり、そのようなパーシャルのカスタムヘルパーを作成したりすることで、さらに先に進むことができます。

*// This will be the helper in you app.js file*

Handlebars.registerHelper("mypartials", function(partialName, data) {
     var partial = Handlebars.registerPartial(partialName) || data.fn
     Handlebars.partials[partialName] = partial
})

そして、テンプレートファイルにこれを入れることができます...

{{#mypartial "divPartial"}}
  <div id="block"><h2>{{foo}}</h2><p>{{bar}}</p></div>  
{{/mypartial}}

{{#mypartial "formPartial"}}
  <form id="foo"><input type="text" value="{{foo}}" name="{{bar}}"></form>
{{/mypartial}}

これで、を呼び出すことでこのファイルにアクセスできます

var html = Handlebars.partials["divPartial"]({"foo":"bar","bar":"foo"})
var formHtml = Handlebars.partials["formPartial"]({"bar":"bar","foo":"foo"})

これが少し役に立ったことを願っています..

于 2013-02-20T18:00:48.987 に答える
0

この速度テストhttp://jsperf.com/handlebars-compile-vs-precompile/3で答えが得られました。

どうやら、1 つの解決策は、eval()その結果の文字列に対するものであり、それは機能します。

コードは

var data = { name: "Greg" };
var source = "<p>Howdy, {{ name }}</p>";

eval("var templateFunction = " + Handlebars.precompile(source));
var template = Handlebars.template(templateFunction);

template(data);
=> "<p>Howdy, Greg</p>"

もちろん、eval には注意が必要であり、おそらくより良い解決策が存在します。

于 2013-01-03T22:29:48.170 に答える