反应式 javascript - 将 ajax 调用转换为 Bacon.js 带分页的流

Question

如何在支持分页的情况下将对服务器 API 的调用转换为 Bacon.js / RxJs 流？

对于分页，我希望能够存储最后请求的项目索引，并从该索引中请求下一个 page_size 项目来填充流。

但我需要 'load next page_size items' 方法只有在流中的所有项目都已被读取时才被调用。

这是我写的一个测试：

var PAGE_SIZE = 20;
var LAST_ITEM = 100;
var FIRST_ITEM = 0;

function getItemsFromServer(fromIndex) {
    if (fromIndex > LAST_ITEM) { 
        return [];
    }

    var remainingItemsCount = LAST_ITEM-fromIndex;
    if (remainingItemsCount <= PAGE_SIZE) {
        return _.range(fromIndex, fromIndex + remainingItemsCount);
    }
    return _.range(fromIndex, fromIndex + PAGE_SIZE);
}


function makeStream() {
    return Bacon.fromBinder(function(sink) {
        var fromIndex = FIRST_ITEM;

        function loadMoreItems() {
            var items = getItemsFromServer(fromIndex);
            fromIndex = fromIndex + items.length;
            return items;
        }

        var hasMoreItems = true;

        while (hasMoreItems) {
            var items = loadMoreItems();
            if (items.length < PAGE_SIZE) { hasMoreItems = false; }
            _.forEach(items, function(item) { sink(new Bacon.Next(item)); });
        }        

        return function() { console.log('done'); };
    });
}

makeStream().onValue(function(value) {
    $("#events").append($("<li>").text(value))
});

http://jsfiddle.net/Lc2oua5x/10/

目前 'getItemsFromServer' 方法只是一个虚拟的并在本地生成项目。如何将它与 ajax 调用或 return 项目数组的承诺结合起来？并且可以执行未知次数（取决于服务器上的项目数和页面大小）。

我阅读了有关 Bacon.fromPromise() 的文档，但无法将其与分页一起使用。

Answer 1

您需要使用 flatMap 将页面映射到使用 Bacon.fromPromise 创建的流。这是一个工作示例，我在其中使用 jsfiddle echo 端点（它发送回相同的数据）

Bacon.sequentially(0, _.range(0,5))
.map(toIndex)
  .flatMap(loadFromServer)
  .onValue(render)

function toIndex(page) {
    return page * PAGE_SIZE
}

function loadFromServer(index) {
    var response = getItemsFromServer(index)
    return Bacon.fromPromise($.ajax({
      type: 'POST',
      dataType: 'json',
      url: '/echo/json/',
      data : { json: JSON.stringify( response ) }
    }))
}

function render(items) {
    items.forEach(function(item) {
        $("#events").append($("<li>").text(item))
    })
}

http://jsfiddle.net/1eqec9g3/2/

注意：此代码依赖于来自服务器的响应，响应顺序与发送顺序相同。

反应式 javascript - 将 ajax 调用转换为 Bacon.js 带分页的流

Reactive javascript - convert ajax calls to Bacon.js stream with pagination

javascript

ajax

pagination

bacon.js