使用下划线模板渲染一些基本数据

Question

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

"[{"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 上的 NewsList 集合返回的。

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>

当我运行此代码时，我得到参考错误标题未定义。请帮助我这几天一直在做这件事。谢谢。

Answer 1

你的代码有两个问题：

1. 您尝试访问作为newsList 传递给模板的数组。为此，您必须将其作为键 newsList 的值传递到模板中
2. 您尝试仅通过键访问 newsList 数组项的属性 - 您必须通过 bulletin 访问它们，它在您的 _.each 循环中保存项目数据

你必须这样做：

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>

小提琴：

http://jsfiddle.net/marionebl/S2rUp/