试图理解 Cycle.js 中的树结构组成答案

【问题标题】：Trying to understand tree structure composition in Cycle.js试图理解 Cycle.js 中的树结构组成
【发布时间】：2017-02-15 13:50:32
【问题描述】：

我目前正在通过阅读官方“文档”和我能找到的任何示例来学习 Cycle.js。我仍在研究一些核心概念，特别是发现自己陷入了试图理解如何形成顶级组件的困境。我认为这是因为我仍在为如何有效地使用流而苦苦挣扎……

在我的场景中，利用 xstream 和 snabbdom，我有一个我想以 ul>li 格式呈现的项目列表。我可以看到我的列表如何转换为 li 表单：

const sampleItems$ = xs.fromArray([1, 2, 3, 4, 5]);
const liNodes$ = sampleItems$.map(item => li(item));

我不明白的是如何在不改变现有节点的情况下将 liNodes$ 包装在 ul 中，例如

const ulNode$ = liNodes$.fold((ul, li) => {
    ul.children.push(li);
    return ul;
}, ul([]));

我认为上面的示例不是在容器中“嵌套”流内容的正确方法。我意识到这可能由静态标记提供，但想了解如何使用流运算符组合此结构。

【问题讨论】：

【解决方案1】：

当你写作时

const sampleItems$ = xs.fromArray([1, 2, 3, 4, 5]);

结果是随着时间的推移发出值 1、2、3、4、5 的流。另一方面，如果你写

const sampleItems$ = xs.of([1, 2, 3, 4, 5]);

结果是一个发出一个值的流，该值是数组[1, 2, 3, 4, 5]。这可能是你想要的，因为那样你就能做到

const ulNode$ = sampleItems$.map(sampleItems =>
  ul(sampleItems.map(item =>
    li(item)
  )
);

【讨论】：