使用带有Wordpress JSON API的filter.js流媒体

时间:2014-08-19 10:11:47

标签: jquery wordpress performance filtering json-api

filter.jsWordpress JSON API合作得很好但是我必须告诉JSON API输出所有帖子但是指定&count=-1(通常它们会在10秒内分页)。< / p>

虽然没有大量的帖子,但是添加的内容越多,Wordpress JSON API生成JSON所需的时间就越长。

filter.js提供流媒体功能,可以抓取JSON文件的块并逐步将它们添加到页面中。

真正的问题:

如何使用Wordpress JSON API分页结果获取'streaming'(其AJAX请求格式为.json?offset=0&limit=50)?每个新页面都需要新的Wordpress JSON API来电&page=2等。

以下是我到目前为止的相关代码,但您可以在粘贴框中找到所有代码:http://pastebin.com/EKhBddmh

apiLocation: '/api/get_posts/?post_type=business&count=-1',

settings: {
  filter_on_init: true,
  filter_criteria: {
    location: ['.js__filter-location .TYPE.any', 'taxonomy_business_location.ARRAY.slug'],
    type: ['.js__filter-type .TYPE.any', 'taxonomy_business_type.ARRAY.slug']
  },
  search: {
    input: '#filterSearch',
    search_in: '.media__title, .media__body, .media__footer'
  },
  filter_types: {
    any: function( current_value, option ){
      if ( current_value === '') { return true; }
      else { return current_value === option; }
    }
  },

  streaming: {
    data_url: filter.apiLocation,
    stream_after: 1,
    batch_size: 10
  },
}

init: function(){
  return FilterJS( filter.get_api_data( filter.apiLocation ).posts, '#resultsList', filter.view, filter.settings );
}


get_api_data: function( api_location ){

  var data;

  $.ajax({
    async: false, //thats the trick
    url: api_location,
    dataType: 'json',
    success: function( response ){
       data = response;
    }
  });

  return data;

},

1 个答案:

答案 0 :(得分:1)

我还没有对此进行测试,但这样的事情应该有效......

尝试添加这些配置更改。 Filter.js会将params选项作为查询参数添加到请求中:

filter = {

    filterCount: 0,
    apiLocation: '/api/get_posts',

    settings: {

        ... keep current settings, including streaming parameter ...

        params: {
            'post_type': 'business',
            'page': 1,
            'count': 10
        },
        callbacks: {
            after_filter: function( result ){

                ... keep current function ...

            },
            before_add: function() {
                filter.settings.params.page++;
            }
        }
    }
}

删除get_api_data函数(只让filter.js处理ajax请求)并将init更改为:

init: function(){

    if ( $('body').hasClass('view-map') ) {
        window.googleMap.init();
    }

    filter.bind();
    filter.create_results();

    return FilterJS([], '#resultsList', filter.view, filter.settings);
}