我正在尝试使用Underscore.js forEach方法将对象列表加载到模板中:
HTML模板代码:
<script type="text/template" id="element">
<% _.each(data, function (element) { %>
<div class="col-xs-12 col-sm-12 col-md-4" id="inner-element">
<div class="thumbnail">
<img class="img-responsive" src="../../../img/<%= element.img %>" alt="...">
<div class="caption">
<h3 class="menu-food-name"><%= element.name %></h3>
<p class="menu-food-description"><%= element.description %></p>
<p class="menu-food-price text-right"><span class="label label-info" role="button"><%= element.price %></span></p>
</div>
</div>
</div>
<% }); %>
</script>
Run Code Online (Sandbox Code Playgroud)
使用Javascript:
var elementTemplate = _.template($('#element').html(), {data: item});
that.$el.append(elementTemplate);
Run Code Online (Sandbox Code Playgroud)
"item"之前被定义为一个对象数组,其中包含三个元素,其中包含我希望在模板中显示的属性(名称,描述,价格和img)(如console.log(item)中所示):
Object {0: Object, 1: Object, 2: Object}
0: Object
description: "grilled portobello and balsamic"
img: ""
name: "fungi grigliati"
price: "7.95" …Run Code Online (Sandbox Code Playgroud) javascript jquery backbone.js underscore.js underscore.js-templating