在遍历json对象时遇到问题

Question

我有下面的数组

  var data = [
            {
                title: 'This is title',
                desc: 'This is desc',
                date: '07:12'
            },
            {
                title: 'This is title2',
                desc: 'This is desc2',
                date: '04:12'
            },
            {
                title: 'This is title3',
                desc: 'This is desc3',
                date: '09:12'
            }
        ];

现在，我想遍历这些数据以使用underscorejs模板进行显示。 我正在尝试以下哪个不起作用。

<% _.each(function () { %>
        <li>
            <span class="time"><%= date %></span>
            <p><%= title %></p>
            <p><%= desc %></p>
        </li>
    <% }); %>

上面的代码不显示任何内容，并且在控制台中也不显示任何错误。 如何遍历此数组数据以显示所有数据？

UPDATE

这是更多代码。 我正在从骨干视图传递此数据

var Message = Backbone.View.extend({
    className: 'tops',

    render: function () {
        console.log(this.model.toJSON()); //<-- see output for this below
        this.$el.html(_.template(MessageTemplate, this.model.toJSON()));
        return this;
    }
});

console.log（）输出

Object {title: "This is title", desc: "This is desc", date: "07:12"} message.js:6
Object {title: "This is title2", desc: "This is desc2", date: "04:12"} message.js:6
Object {title: "This is title3", desc: "This is desc3", date: "09:12"} 

我将上面的对象传递到我的模板，然后循环遍历以显示。

Answer 1

您需要指定要遍历的对象：

<% _.each(data,function (elem) { %>
    <li>
        <span class="time"><%= elem.date %></span>
        <p><%= elem.title %></p>
        <p><%= elem.desc %></p>
    </li>
<% }); %>

请参阅下划线文档 。

Answer 2

来自underscorejs.org

在评估模板函数时，请传入一个具有与模板的自由变量相对应的属性的数据对象。 如果您要编写一次，则可以将数据对象作为第二个参数传递给模板，以便立即呈现而不用返回模板函数。

您在模板中使用的下划线代码的工作方式与正常将其写出来的方式相同。 _.each至少需要两个参数。 首先是要迭代的项目列表，其次是对每个项目执行的操作。

_.each([1, 2, 3], alert);

您需要对模板执行相同的操作。

<% _.each(dataSet, function (item) { %>
    <li>
        <span class="time"><%= item.date %></span>
        <p><%= item.title %></p>
        <p><%= item.desc %></p>
    </li>
<% }); %>

var rendered_html = _.template(template, {dataSet: data})

请注意，传递给_.template的第二个对象如何包含dataSet的键。 我们传递给_.template的键可以在我们的模板代码中用于引用与它们关联的值。

您可以在此处查看示例： http : //jsbin.com/upugaz/1/edit

Answer 3

将数组传递到模板时，必须给它起一个名字：

this.$el.html(_.template(MessageTemplate, { 'items': this.model.toJSON() }));

现在，您可以在模板内引用要循环遍历的数组：

<% _.each(items, function (item) { %>
    <li>
        <span class="time"><%= item.date %></span>
        <p><%= item.title %></p>
        <p><%= item.desc %></p>
    </li>
<% }); %>