2012-01-25 3 views
1

HTML :jsRender - 각 루프에서 여분의 공백

<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

+0

'{{if if}}'와'{{/ each}} '사이의 줄 바꿈은 아마도 추가 (원하지 않는) 공간으로 렌더링 될 것입니다. 해당 줄 바꿈을 제거해보십시오. –

+0

답으로 답장하면 올바른 것으로 표시하겠습니다. 고마워. –

답변

1

HTML이 하나의 공간으로 연속적인 공백 문자의 양을 응축 이후 {{/if}}{{/each}} 사이의 LINEBREAK는 것, 추가 공간으로 렌더링되고있다. 불필요한 줄 바꿈을 제거하고 문제가 해결되는지 확인하십시오.