0

在以下示例中（来自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流中，所以我看不出这会有什么用，或者至少我不明白它是如何像声称的那样作为过滤器工作的。

4

2 回答 2

0

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

于 2017-01-30T13:37:59.567 回答
0

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

假设您有一个“Item”组件列表，它将成为“List”组件的一部分，其中“Item”具有以下来源：

export interface Sources {
  dom: DOMSource;
}

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

export interface ItemSourcesAll extends ItemSources, Sources {}

ItemSourcesAll由“Item”组件在内部使用。然而，在我们的“List”组件中，我们只需要关注 ItemSources，因为 Collection 负责将 ItemSources 与 Sources 合并。所以在我们的“List”组件中，我们可能有一些看起来像这样的代码：

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

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

  const listItems$ = Collection(Item, sources, itemSources$);
于 2017-01-28T22:43:27.770 回答