1

HTML:

<div id="container"></div>

<script type="text/x-jquery-tmpl" id="tmpl">
  <div>{{=title}}</div>
  <div>
    {{#each cast}}
      {{#if $itemNumber == 1 }}{{=name}}{{else}}, {{=name}}{{/if}}        
    {{/each}}
  </div>
</script>

JS:

var json = [{ title: "Mission Impossible IV", cast: [ {name: "Tom Hanks"}, {name: "Jackie Chan"}, {name: "Tom Cruise"} ]}];

$("#container").html(
    $("#tmpl").render(json)
);

次のようにレンダリングします。

Mission Impossible IV
Tom Hanks , Jackie Chan , Tom Cruise

問題:各名前の後のスペースに注意してください。ただし、テンプレートにはスペースがありません。タグがすべてまとめられている{{#if $itemNumber == 1 }}{{=name}}{{else}}, {{=name}}{{/if}}ため、余分なスペースがあってはなりません。

質問:これらの余分なスペースがどのようにそこに入っているかについて何か考えはありますか?

ここで微調整できます: http://jsbin.com/otiqun/2/edit

4

1 に答える 1

1

HTMLは任意の数の連続する空白文字を単一のスペースに凝縮するため、{{/if}}との間の改行は追加のスペースとしてレンダリングされる可能性があります。{{/each}}不要な改行を削除して、問題が解決するかどうかを確認してください。

于 2012-01-25T16:32:23.087 に答える