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

您的代码有两个问题：

您尝试以newsList的形式访问要传递给模板的阵列。为此，您必须将其作为关键newsList的值传递到模板

您尝试仅通过其密钥访问newsList数组项的属性 - 您必须通过bulletin访问它们，其中_.each循环中包含项数据< / LI>

你必须这样做：

使用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/

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

1 个答案: