underscore.js 템플릿에 배열을 인쇄하는 방법은 무엇입니까?

Question

나는 underscore.js의 템플릿 라이브러리를 사용하고 있으며, 템플릿 내부에서 로직을 사용하는 방법을 모르겠습니다. 예를 들어 템플릿에 태그 배열을 인쇄하고 싶습니다. 가장 좋은 방법은 무엇입니까?

자바 스크립트 :

bunny_data = { 
    name: "sprinkles", 
    age: 1, 
    tags: ['fuzzy','wuzzy'] 
}; 

bunny_view = $("#bunny-template").html(); 
$(body).append(_.template(bunny_view,bunny_data)); 

템플릿 : 당신이 당신의 자바 스크립트에서 제대로 bunny_data을 설정하지 않는 것 같은

<script type='text/template'> 
    <div> 
    <h5><% = name %></h5> 
    <ul class='tag-list'> 
     <!-- How do I print the tags here? --> 
    </ul> 
    </div> 
</script> 

Answer 1

@ Ken이 제안한대로 bunny_data을 캡슐화 할 필요가 없습니다. 올바른 길을 가고있었습니다. _. 함수를 호출하거나 일반 Javascript 구문을 사용할지 여부는 사용자가 결정할 수 있지만 Underscore 템플릿에는 기본 제공 흐름 구조가 없으므로 코드를 포함하기 만하면됩니다 (eco 또는 Mustache 또는 당신이 원한다면 무엇인가). (당신이 자신과 거의 동일)

내 예는 다음과 같습니다

<script type='text/template' id="bunny-template"> 
    <div> 
    <h5><%= name %></h5> 
    <ul> 
     <% for(var tag in tags) { %> 
      <li><%= tags[tag] %></li> 
     <% } %> 
    </ul> 
    </div> 
</script> 

을 다음 자바 스크립트로 :

bunny_data = { 
    name: "sprinkles", 
    age: 1, 
    tags: ['fuzzy','wuzzy'] 
}; 

bunny_view = $("#bunny-template").html(); 
$(body).append(_.template(bunny_view, bunny_data)); 

당신은 here를 실행하는지 확인할 수 있습니다.

(개인적인 선호 사항에 대해, 나는이 이유로 템플릿을 제외하고는 모두 밑줄이 많이 사용됩니다. 좀 더 복잡한 사용법이있는 경우에는 코드에 넣어야하는 코드 량이 마음에 들지 않습니다. 케이스). 당신이

<ul> 
    <li><%= tags.join('</li><li>') %></li> 
</ul> 

이 jsFiddle 그것을 확인해야합니다 HTML에서, 그래서

Answer 2

것 같습니다.

대신 :

$(body).append(_.template(bunny_view,bunny_data)); 

시도 :

$(body).append(_.template(bunny_view, { bunny_data: bunny_data })); 

인쇄 템플릿의 데이터 (나는 <%= name %>에 % 후 공간을 제거 통지) :

<script type='text/template'> 
    <div> 
    <h5><%= name %></h5> 
    <ul class='tag-list'> 
     <% _.each(bunny_data, function(bd) { %> 
     <li><%= bd.name %></li> 
     ... 
     <% }); %> 
    </ul> 
    </div> 
</script> 

희망이 도움이됩니다.

Answer 3

또한 join은 트릭을 할 것입니다.