0

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

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

4

1 回答 1

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)
  )
);
于 2017-02-15T20:39:13.560 回答