有下划线的模板避免重复 - 骨干

Question

假设我有一个有一堆布尔属性的骨干机型：

Car = Backbone.Model.extend({}); 

car_one = new Car({ 
    a_c: true, 
    mp3: true, 
    gps: false, 
    touchscreen: false, 
    // etc... 
}) 

我希望能够使这些布尔属性的列表，并有一个图标在他们旁边，取决于真假。如果为true，图标将变为绿色勾号，否则显示红色的X图标。

东西中的台词：

<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：

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

我有大约12布尔属性需要像这样呈现...

Answer 1

您可以从模板中访问JavaScript函数。所以，你可以把东西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声明。但是，您可以使用变量设置来指定单个变量名称。这可以显着提高模板能够呈现的速度。

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

然后你就可以有这样的事情在你的模板：

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

，并使用你的模板是这样的：

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

演示：http://jsfiddle.net/ambiguous/Yr4m5/

通过使用variable选项你不得不说<%= json.attribute %>而不是<%= attribute %>，但这很小。

您可以使用类似的方法逐个格式化<li>，并在模板中保留更多HTML。

另一种选择是抛出一个for循环到模板中，这样的事情：

<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'选项，以及，你需要一个所以当名字在变量中时，你可以使用[]来按名称获取字段。 This al