Cycle.js - 如何在集合项中获取集合长度答案

【问题标题】：Cycle.js - How to get collection length in a collection itemCycle.js - 如何在集合项中获取集合长度
【发布时间】：2018-06-13 02:26:13
【问题描述】：

我正在尝试将一些行为专门添加到 Cycle.js 列表中的最后一项。我尝试使用 cycle-onionify 来制作这样的集合：

const List = makeCollection({
  item: Child,
  itemKey: (childState, index) => String(index),
  itemScope: key => key,
  collectSinks: instances => {
    return {
      onion: instances.pickMerge('onion'),
      DOM: instances.pickCombine('DOM')
        .map(itemVNodes => ul(itemVNodes))
    }
  }
});

我知道可以使用镜头在组件之间共享状态，但似乎没有办法将镜头与集合一起使用。我想我可以将 Collection 长度传递给孩子们，这样我就可以将它与 id 进行比较。

我有什么遗漏吗？

【问题讨论】：

标签： javascript functional-programming cyclejs

【解决方案1】：

您可以使用带有makeCollection 的镜头。请记住，它返回一个可以隔离的普通 Cycle.js 组件。所以如果你想添加一个布尔值isLast，你可以这样做：

function omit(obj, key) {
    let tmp = { ...obj }; //Copy the object first
    delete tmp[key];
    return tmp;
}

const listLens = {
   get: stateArray => stateArray.slice(0, -1).concat({
            ...stateArray[stateArray.length - 1],
            isLast: true
        }),
   set: (stateArray, mappedArray) => mappedArray.slice(0, -1)
           .concat(omit(mappedArray[mappedArray.length - 1], 'isLast'))
};

const List = isolate(
    makeCollection({
        item: Child,
        itemKey: (childState, index) => String(index),
        itemScope: key => key,
        collectSinks: instances => ({
            onion: instances.pickMerge('onion'),
            DOM: instances.pickCombine('DOM')
                .map(itemVNodes => ul(itemVNodes))
        })
    }),
    { onion: listLens, '*': null }
);

附带说明，如果您想在每个单独的项目上应用镜头，您也可以这样做，使用 itemScope 属性。例如

itemScope: key => ({ onion: myLens, '*': key })

【讨论】：