0

ハンドルバー テンプレート内でやりたいことは次のとおりです。

{{#capture $str}}racing car{{/capture}}
i want a {{$str}} for xmas!

意図した結果:

i want a racing car for xmas!

そのため、キャプチャ/記録された html はローカル変数に書き込まれ、それを出力する必要があります。

何か案は？

編集:ユースケース
OK、最初はこれが可能かどうか知りたいだけです。私はそれを試してから、別のことをするかもしれません。

それでも、ここではより精巧な使用例を示します。まだ作り話ですが、実物を見てもあまり価値はありません。

{{#capture $long_html_1}}
  <input class=".." name=".." value=".." />
{{/capture}}

{{#capture $long_html_2}}
  <select class=".." name="..">
    <option ... />
    <option ... />
    <option ... />
    <option ... />
  </select>
{{/capture}}

{{#if layoutVariation1}}
  <section class="layout-1">
    <div class="row-fluid">
      <div class="span5">{{$long_html_1}}</div>
      <div class="span7">{{$long_html_2}}</div>
    </div>
  </section>
{{else}}
  <fieldset class="whatever-something-else">
    <label ...>The label</label>
    <div class="box">{{$long_html_1}}</div>
    <div class="box">{{$long_html_2}}</div>
  </fieldset>
{{/if}}

2 つの $long_html_X 要素の宣言を繰り返したくありません。また、それらのそれぞれに個別のテンプレートを作成したくありません (または、作成する必要があるのでしょうか?)。そして、if/else ハンドルバー タグの量を減らして、読みやすくしたいと考えています。

4

1 に答える 1

1

変数のように「ハンドルバー パーシャル」を使用できます。

部分テンプレート

<script id="long_html_1" type="text/x-handlebars-template">
  <input class=".." name=".." value=".." />
</script>

<script id="long_html_2" type="text/x-handlebars-template">
  <select class=".." name="..">
    <option ... />
    <option ... />
    <option ... />
    <option ... />
  </select>
</script>

メイン テンプレート

<script id="main" type="text/x-handlebars-template">
{{#if layoutVariation1}}
  <section class="layout-1">
    <div class="row-fluid">
      <div class="span5">{{> long_html_1}}</div>
      <div class="span7">{{> long_html_2}}</div>
    </div>
  </section>
  {{else}}
  <fieldset class="whatever-something-else">
    <label ...>The label</label>
    <div class="box">{{> long_html_1}}</div>
    <div class="box">{{> long_html_2}}</div>
  </fieldset>
{{/if}}
</script>

レンダリング スクリプト

var template = Handlebars.compile($("#main").html());

Handlebars.registerPartial("long_html_1", $("#long_html_1").html());
Handlebars.registerPartial("long_html_2", $("#long_html_2").html());

var html1 = template({layoutVariation1: true});
var html2 = template({layoutVariation1: false});

$(document.body).html(html1 + '<hr>' + html2);

http://jsfiddle.net/nUDf3/で実際の例を確認できます。

于 2013-01-04T00:36:09.673 に答える