车把:"捕获"一段html变成一个变量

时间:2012-12-28 08:10:08

标签: javascript handlebars.js

以下是我在车把模板中要做的事情:

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

预期结果:

i want a racing car for xmas!

因此,捕获/记录的html应写入局部变量,然后可以打印。

有什么想法吗?


编辑:用例
好的,起初我只是想知道这是否可行。我可能会尝试,然后再做其他事情。

不过,这是一个更详细的用例。它仍然是化妆品,但看到确切的东西不会增加太多价值。

{{#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}}

我不想重复两个$ long_html_X元素的声明。我也不想为每个人制作一个单独的模板(或者我应该?)。我想减少if / else车把标签的数量,以保持其可读性。

1 个答案:

答案 0 :(得分: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/

查看一个有效的示例