使用handlebar js在json上迭代的问题

时间:2012-08-13 03:29:20

标签: jquery handlebars.js

我正在使用把手js迭代json数据对象。但是把手抛出了一个异常,说“depth0”未定义。

我是以正确的方式做这一代人吗?

HTML

<div class="eventlist">                                 
  <ul>                                      
    <script id="event_template" type="text/x-handlebars-template">                          
      <li>{{name}}</li>                             
  </script>                                     
</ul>                               
</div>

JS

generateEventList = function(){
    var el_tmpl = Handlebars.compile($('#event_template').html());
    $.getJSON('json/events.json' , function(k,v) {
        $('.event-list ul').append(el_tmpl(v.eventList));
    });
};

JSON

{ 
 "event": [ 
  { 
     "month": "august", 
     "eventList": { 
        "name": "Event1",
        "name": "Event1",
        "name": "Event2",
        "name": "Event3",
        "name": "Event4",
        "name": "Event5",
        "name": "Event6"
     }, 
     "list": [ 
        { 
           "name": "Comment", 
           "link": "http://www.facebook.com/X999/posts/Y999"
        }, 
        { 
           "name": "Like", 
           "link": "http://www.facebook.com/X999/posts/Y999"
        } 
     ], 
     "type": "status", 
     "created_time": "2010-08-02T21:27:44+0000", 
     "updated_time": "2010-08-02T21:27:44+0000"
  }
 ] 
}

1 个答案:

答案 0 :(得分:0)

我认为你对$.getJSON成功处理程序获取的参数有点困惑:第一个参数是整个JSON响应,第二个参数是文本状态。

您希望$.each使用以下内容迭代eventList

$.getJSON('json/events.json' , function(data) {
    var $ul = $('.event-list ul');
    $.each(data.event[0].eventList, function(k, v) {
        $ul.append(el_tmpl(v));
    });
});

因此k,v功能会在$.each而不是$.getJSON上进行,您需要正确挖掘data

您可能需要list而非eventList,如果没有更多背景信息,很难说。