Question

我尝试使用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>

使用Javascript：

var elementTemplate = _.template($('#element').html(), {data: item});
that.$el.append(elementTemplate);

＆＃34;项目＆＃34;之前定义为包含三个元素的对象数组，其中包含我想在模板中显示的属性（名称，描述，价格和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"
        __proto__: Object
    1: Object
        description: "baked clams"
        img: ""
        name: "vongole oreganate"
        price: "7.95"
        __proto__: Object
    2: Object
        description: "mussels marinara sauce"
        img: ""
        name: "padellata di cozze"
        price: "13.95"
        __proto__: Object
__proto__: Object

我一直得到一个＆＃34;未捕获的ReferenceError：未定义数据＆＃34;我尝试运行此代码时在开发控制台中出错。我想我可能会忽略Underscore forEach方法的工作原理。我假设我通过的数据可能没有正确格式化。任何想法/帮助都会很棒。

Answer 1

错误就在那里，data未定义。这与_.each无关;相反，您错误地使用了_.template。

第二个参数是templateSettings，而不是数据。您将数据传递给_.template返回的函数。

// create template function
var elementTemplate = _.template($('#element').html());
// render the template with the given data
that.$el.append(elementTemplate({data: item}));

Underscore.js：未捕获的ReferenceError：未定义数据

1 个答案: