在遍历json对象时有问题

having issue looping through json objects

本文关键字：有问题 对象 json 遍历      更新时间：2023-09-26

我有一个像

这样的数组
  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'
            }
        ];

现在我想循环遍历这些数据，以使用下划线模板显示。

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

上面的代码没有显示任何内容，也没有在控制台显示任何错误。如何循环遍历数组数据以显示所有数据?

这里是一些更多的代码。我从主干视图传递这个数据

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"}

我把上面的对象传递给我的模板，然后循环遍历它来显示

您需要指定要循环遍历的对象:

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

From 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

在将数组传递给模板时必须给它一个名称:

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>
<% }); %>
相关文章：