방지 반복 백본

Question

내가 부울 속성 무리가있는 백본 모델을 가지고 있다고 가정 진실 또는 거짓에 따라 그들 옆에. true이면 아이콘이 녹색 눈금으로 표시되고 그렇지 않으면 빨간색 X 아이콘이 표시됩니다. 의 라인

뭔가 :

<% if (model.a_c === true) { %> 
    // show tick... 
<% } else { %> 
    // show red cross.. 
<% } %> 

나는 약 12 ​​부울이 있습니다

<ul> 
<li><img src="tick.png">AC</li> 
<li><img src="tick.png">MP3</li> 
<li><img src="cross.png">Gps</li> 
<li><img src="cross.png">Touch screen</li> 
</ul> 

대신 템플릿에 if statement 각 li 포장에,이 작업을 수행하는 더 좋은 방법이 있나요 이와 같이 렌더링해야하는 속성은 다음과 같습니다.

Answer 1

템플릿 내에서 JavaScript 기능에 액세스 할 수 있습니다. 그래서 당신은 (전역 IE) window에 뭔가를 넣어 수 :

window.underscore_helpers = { 
    list_of_booleans: function(obj, bools) { 
     // 'obj' is the object for the template, 'bools' 
     // is an array of field names. Loop through 'bools' 
     // and build your HTML... 
     return the_html_li_elements; 
    } 
}; 

그런 다음 당신은 variable option to _.template을 활용하는 것이 좋습니다 : 곳 값에서 기본적으로

, 템플릿 당신의 데이터는 with 문을 통해 로컬 범위에 있습니다. 그러나 변수 설정으로 단일 변수 이름을 지정할 수 있습니다. 이렇게하면 템플릿을 렌더링 할 수있는 속도가 크게 향상 될 수 있습니다.

<%= underscore_helpers.list_of_booleans(
    json, 
    ['a_c', 'mp3', 'gps', 'touchscreen'] 
) %> 

과 같은 템플릿 사용 :

_.template("<%= data.hasWith %>", {hasWith: 'no'}, {variable: 'data'}); 
    => "no" 

그럼 당신은 템플릿이 뭔가를 할 수 있습니다 사용하여 http://jsfiddle.net/ambiguous/Yr4m5/

:

var html = _.template($('#t').html(), model.toJSON(), { variable: 'json' }); 
// or 
var tmpl = _.template($('#t').html(), null, { variable: 'json' }); 
var html = tmpl(model.toJSON()); 

데모 variable 옵션 당신은 <%= attribute %> 대신에 <%= json.attribute %>라고 말해야 할 것입니다.하지만 그것은 아주 사소한 것입니다.

비슷한 방법을 사용하여 <li>을 하나씩 포맷하고 더 많은 HTML을 템플릿에 보관할 수 있습니다.

이

<script id="t" type="text/x-underscore-template"> 
    <ul> 
     <% var fields = ['a_c', 'mp3', 'gps', 'touchscreen' ] %> 
     <% for(var i = 0; i < fields.length; ++i) { %> 
      <li class="<%= json[fields[i]] ? 'true' : 'false' %>"><%= fields[i] %></li> 
     <% } %> 
    </ul> 
</script>​​​​​​​​​​​​​​​​​​​​ 

데모 : http://jsfiddle.net/ambiguous/983ks/이

당신이뿐만 아니라 variable: 'json' 옵션을 사용하는 것을 알 수 있습니다

, 당신은 것을 필요

또 다른 옵션은 템플릿으로 이런 일을 for 루프가 발생하는 것입니다 따라서 변수에 이름이있을 때 []을 사용하여 이름으로 필드를 잡을 수 있습니다. 이 알