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

Question

我目前正在通过阅读官方 "docs" 和我能找到的任何示例来学习 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([]));

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

Answer 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)
  )
);

Trying to understand tree structure composition in Cycle.js