gpt4 book ai didi

javascript - 使用下划线模板避免重复 - 主干

转载 作者:行者123 更新时间:2023-11-30 08:58:44 26 4
gpt4 key购买 nike

假设我有一个具有一堆 bool 属性的 Backbone 模型:

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

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

我希望能够呈现这些 bool 属性的列表,并在它们旁边有一个图标,具体取决于 true 或 false。如果为 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>

有没有更好的方法来做到这一点,而不是将每个 li 包装在模板中的 if 语句 中:

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

我有大约 12 个 bool 属性需要像这样呈现......

最佳答案

您可以从模板中访问 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 :

By default, template places the values from your data in the local scope via the with statement. However, you can specify a single variable name with the variable setting. This can significantly improve the speed at which a template is able to render.

   _.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'选项也是如此,您需要它以便您可以使用 []当名称在变量中时按名称获取字段。这一切

关于javascript - 使用下划线模板避免重复 - 主干,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11181594/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com