javascript - JSON 破坏了我的脚本，但它仍然提取数据

Question

我有一个小画廊插件，我必须使其支持 JSON。我成功提取了数据，但脚本不再按其应有的方式运行。加载数据后，单击缩略图应展开描述区域。

我认为 js 试图在 json 将内容加载到页面之前运行。就像我需要某种不基于事件的 .on() 功能等待点击。

整个js fiddle http://jsfiddle.net/xM386/

这是我的 json 调用

$().ready(function () {
$.getJSON('assets/js/json/demo.json', function (data) {
    //Collection of li elements
    var $items = [];

    $.each(data, function (key, val) {
        $items.push('<li><a href="#" data-title="Veggies sunt bona vobis" data-largesrc="' + val.image + '" data-description="dd"><img src="' + val.image + '" /><div class="gh"><span> ' + val.VideoTitle + '</span></div></a></li>');
    });

    $('<ul/>', {
        'class': 'og-grid da-thumbs',
        'id': 'og-grid',
        html: $items.join('')
        }).appendTo('#myGrid');
    });

});

$(function () {
    Grid.init();
});


var Grid = (function() {

    // list of items
var $grid = $( '#og-grid' ),
    // the items
    $items = $grid.children( 'li' ),
    // current expanded item's index
    current = -1,
    // position (top) of the expanded item
    // used to know if the preview will expand in a different row
    previewPos = -1,
    // extra amount of pixels to scroll the window
    scrollExtra = 0,
    // extra margin when expanded (between preview overlay and the next items)
    marginExpanded = 10,
    $window = $( window ), winsize,
    $body = $( 'html, body' ),
    // transitionend events
    transEndEventNames = {
        'WebkitTransition' : 'webkitTransitionEnd',
        'MozTransition' : 'transitionend',
        'OTransition' : 'oTransitionEnd',
        'msTransition' : 'MSTransitionEnd',
        'transition' : 'transitionend'
    },
    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    // support for csstransitions
    support = Modernizr.csstransitions,
    // default settings
    settings = {
        minHeight : 500,
        speed : 350,
        easing : 'ease'
    };

Answer 1

将依赖于 json 的代码放入完成回调中 (.done())。

一旦成功接收到数据，就会执行此操作。您可能需要进行进一步检查以确保数据不为空，因为即使数据为空，回调也会运行。 (我认为它只会在加载或格式错误时失败)。

我没有更改您在此处添加的代码，只是将其放入完成回调中。

$.getJSON('assets/js/json/demo.json')
    .done(function(data) {

      // Should probably do more checks here

      //Collection of li elements
      var $items = [];

      $.each(data, function (key, val) {
          $items.push('<li><a href="#" data-title="Veggies sunt bona vobis" data-largesrc="' + val.image + '" data-description="dd"><img src="' + val.image + '" /><div class="gh"><span> ' + val.VideoTitle + '</span></div></a></li>');
      });

      $('<ul/>', {
          'class': 'og-grid da-thumbs',
          'id': 'og-grid',
          html: $items.join('')
        }).appendTo('#myGrid');
    });

});

由于 Uncaught ReferenceError: data is not Defined 错误，我已经仔细检查了这是否适用于代码版本。

这正在工作:

(function() {

  var flickerAPI = "https://spreadsheets.google.com/feeds/list/o13394135408524254648.240766968415752635/od6/public/values?alt=json";

  $.getJSON(flickerAPI)
    .done(function( data ) {
      $.each(data.feed.entry, function(key, val) {
        console.log(val.title.$t)
    });
  });

})();