Question

在以下示例中（来自Collections README），听起来好像第三个参数充当过滤器：

function TodoList (sources) {
  const addTodo$ = sources.DOM
    .select('.add-todo')
    .events('click')
    .mapTo(null); // to prevent adding click events as sources

  const todoListItems$ = Collection(TodoListItem, sources, addTodo$);

  const todoListItemVtrees$ = Collection.pluck(todoListItems$, item => item.DOM);

  const sinks = {
    DOM: todoListItemVtrees$.map(vtrees =>
      div('.todo-list', [
        button('.add-todo', 'Add todo'),

        div('.items', vtrees)
      ])
    )
  }

  return sinks;
}

然而，它看起来好像我们正在进行所有点击并将它们映射为null，而在addTodo$流中没有留下任何其他内容（即，没有任何用处）。此外，所有活动仍应在sources信息流中，因此我不知道这将如何有用，或者至少我不了解它如何作为声明的过滤器工作。

Answer 1

在盯着其他一些例子之后，我终于得到了一个打字稿示例，以便我更好地理解发生了什么，尽管我仍然不太了解mapTo null事件是如何填充列表的。

假设你有一个＆＃34; Item＆＃34;的列表将成为＆＃34; List＆＃34;的一部分的组件组件，其中＆＃34;项目＆＃34;有以下来源：

export interface Sources {
  dom: DOMSource;
}

export interface ItemSources {
  item$: Stream<Data>;
}

export interface ItemSourcesAll extends ItemSources, Sources {}

ItemSourcesAll由＆＃34;项目＆＃34;内部使用。零件。在我们的＆＃34; List＆＃34;但是，我们只需要关注ItemSources，因为Collection负责将ItemSources与Sources合并。所以在我们的＆＃34; List＆＃34;组件，我们可能会有一些看起来像这样的代码：

const itemSources$: Stream<ItemSources[]>= res$.map(res =>
    <Data[]> JSON.parse(res.text)
  ).map(items => items.map(item => <ItemSources> {item$: xs.of(item)}));

您现在可以看到作为第二个source参数传递的类型实际上是一个源流。对Collection的调用如下：

  const listItems$ = Collection(Item, sources, itemSources$);

Answer 2

addTodo$基本上是表示项目添加的事件流。您可以选择合并某些特定于项目的源，方法是将它们作为流值提供，但通常您不需要这样做，因为您的项目无论如何都会从Collection的第二个参数获取公共源。所以null意味着您无需合并。

在Cycle.js集合中，第二个源流如何与第一个源相关？

2 个答案: