Javascript 使用下划线模板呈现一些基本数据

我正在尝试使用下划线模板呈现一些基本数据。 数据以这种格式返回

"[{"content":"Some Man Utd fans are beginning to doubt if manager, David Moyes is capable of handling the team","headline":"Man Utd are in shambles","pictures":"empty","videos":"empty","date":{"__type":"Date","iso":"2014-02-10T04:21:00.264Z"},"objectId":"6GuLfFlCao","createdAt":"2014-02-10T04:21:05.633Z","updatedAt":"2014-02-17T19:10:18.138Z"},{"content":"Soccer fans all over the world are anticipating a mouth watering encounter","headline":"League leaders Arsenal face Liverpool at Anfield","pictures":"empty","videos":"empty","date":{"__type":"Date","iso":"2014-02-10T04:21:00.273Z"},"objectId":"cPQd16yv2T","createdAt":"2014-02-10T04:21:06.248Z","updatedAt":"2014-02-17T19:10:20.733Z"},{"content":"Some Man Utd fans are beginning to doubt if manager, David Moyes is capable of handling the team","headline":"Man Utd are in shambles","pictures":"empty","videos":"empty","date":{"__type":"Date","iso":"2014-02-10T09:25:21.534Z"},"objectId":"86vcmLYh0y","createdAt":"2014-02-10T09:25:46.689Z","updatedAt":"2014-02-17T19:10:27.454Z"},{"content":"Soccer fans all over the world are anticipating a mouth watering encounter","headline":"League leaders Arsenal face Liverpool at Anfield","pictures":"empty","videos":"empty","date":{"__type":"Date","iso":"2014-02-10T09:25:21.541Z"},"objectId":"6TshHmMagv","createdAt":"2014-02-10T09:25:46.747Z","updatedAt":"2014-02-17T19:10:34.138Z"},{"content":"The gunner retain top position after Chelsea beat Man City at the Etihad","headline":"Arsenal retain top position","pictures":"empty","videos":"empty","date":{"__type":"Date","iso":"2014-02-10T04:21:00.231Z"},"objectId":"l2r5fACLGf","createdAt":"2014-02-10T04:21:02.521Z","updatedAt":"2014-02-17T19:10:13.398Z"},{"content":"The gunner retain top position after Chelsea beat Man City at the Etihad","headline":"Arsenal retain top position","pictures":"empty","videos":"empty","date":{"__type":"Date","iso":"2014-02-10T09:25:21.498Z"},"objectId":"JAR9JkUqjR","createdAt":"2014-02-10T09:25:44.086Z","updatedAt":"2014-02-17T19:10:25.314Z"},{"content":"What a great victory for the blues against a team that has scored and average 3 goal per game this season","headline":"Man City 0 - 1 Chelsea","pictures":"empty","videos":"empty","date":{"__type":"Date","iso":"2014-02-10T04:21:00.254Z"},"objectId":"eRnVKhKW4H","createdAt":"2014-02-10T04:21:05.255Z","updatedAt":"2014-02-17T19:10:15.774Z"},{"content":"What a great victory for the blues against a team that has scored and average 3 goal per game this season","headline":"Man City 0 - 1 Chelsea","pictures":"empty","videos":"empty","date":{"__type":"Date","iso":"2014-02-10T09:25:21.524Z"},"objectId":"GOkPkeFlQU","createdAt":"2014-02-10T09:25:42.308Z","updatedAt":"2014-02-17T19:10:23.733Z"}]" 

此数据从Parse.com上的新闻列表集合返回

var NewsList = Parse.collection.extend({
model:News
});
var newsList = new NewsList();
newsList.fetch({
success:function(newsList){
//successfully retrieved array of objects..
},
error:function(error){

}
});

我已经试过了

var template = _.template($("#news-template").html());
$("body").append(template(newsList))

我的模板如下所示

<script type="text/template" id="news-template">
   <div id="newspaper">
   <% _.each(newsList, function(bulletin){ %>
   <div id="headline">
<%= headline %>
 </div>

 <div id="pictures">
 <%= pictures %>
 </div>

  <div id="videos">
 <%= videos %>
 </div>

  <div id="content">
 <%= content %>
 </div>

 <% }); %>

 </div>
</script>

---

运行此代码时，我发现引用错误标题未定义。请帮帮我，我已经做了好几天了。谢谢。

您的代码有两个问题：

您试图以

新闻列表

的形式访问传递给模板的数组。为此，必须将其作为关键新闻列表的值传递到模板中

您尝试仅通过其键访问

新闻列表

数组项目的属性-您必须通过

公告

访问它们，该公告保存

中的项目数据。每个
循环

你必须这样做：

Javascript:

$("body").append(template({ newsList: newsList }));

模板：

<script type="text/template" id="news-template">
<div id="newspaper">
 <% _.each(newsList, function(bulletin){ %>
    <div id="headline">
       <%= bulletin.headline %>
    </div>

    <div id="pictures">
      <%= bulletin.pictures %>
    </div>

    <div id="videos">
      <%= bulletin.videos %>
    </div>

    <div id="content">
      <%= bulletin.content %>
    </div>

  <% }); %>
</div>
</script>

小提琴：

---

尝试了这个解决方案后，我仍然无法让它工作。我得到错误类型错误：公告未定义。谢谢我用小提琴更新了答案，也许这有助于澄清问题。这次没有返回错误，但页面只是空的。我所做的更改是将返回的数据分配给一个变量，并将该变量传递到带有新闻列表的模板中，如fiddle中所述。返回的数据应该是键值对，键可能不应该是字符串，但小提琴证明我错了，因为字符串键和值仍然会产生结果。非常感谢你的努力。