试图了解Cycle.JS中的树结构组成

Question

我目前正在通过阅读官方的"文档"以及我能找到的任何示例来学习周期。我仍在研究一些核心概念，尤其是发现自己试图了解如何形成顶级组件。我认为这是因为我仍在为如何有效地与流有效合作...

在我的情况下，利用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([]));

我假设上面的示例不是在容器中"嵌套"流内容的正确方法。我意识到这可能是通过静态标记提供的，但想了解如何使用流操作员组成这种结构。

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