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

Question

我目前正在通过阅读官方的“文档”以及我能找到的任何示例来学习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([]));

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

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