0

我正在尝试将 HTTP 请求的结果打印到 Cycle.js 中的 DOM。现在我只是想列出结果，但它们最终会出现在选择下拉列表中。

我创建流...

const facilityRequest$ = xs.of({
  url: 'http://...',
  category: 'facility'
});

然后选择它...

 const facilityResponse$ = sources.HTTP
  .select('facility')
  .flatten()
  .map(res => res.body.data)
  .startWith([]);

但是当我尝试将结果添加到顶部时，例如：

const vdom$ = form$.map(form =>
  div([
    facilityResponse$.map(res => p(res.id)),
  ])
);

它显示undefined在浏览器窗口中。

但是，如果我添加一个侦听器并将响应记录到控制台，它会显示一系列设施：

facilityResponse$.addListener({
  next: (res) => {
    console.log(res);
  }
})
4

2 回答 2

1

是的！您找到了处理数组流的正确方法。

// CORRECT :)
const facilityVDom$ = facilityResponse$.map(facilities => // <- this is an array
  ul( // <- notice no brackets here, because you already have an array
    facilities.map(f => li(f.id)) // <- ...and array map returns an array
  )
);

然而，这不是列表问题的困难。

随着时间的推移，STREAMS就像数组，将它们视为数组很有用，但它们不是ARRAYS，并且不能与数组互换。仅在 STREAM 上下文中使用流，并且仅在 ARRAY 上下文中使用数组 - 因此您的第一次尝试会出现问题：

// WRONG :(
const vdom$ = form$.map(form =>
  div([ // <-- the `div` function can take an ARRAY of VDOMs as parameter
    facilityResponse$.map(res => p(res.id)), // <-- this is a STREAM, not a VDOM
  ])
);

您在这里有两个错误：1）您在数组上下文中使用了流，2）您将您认为可以与数组互换的内容包装在数组中。因此，您提供给div函数的参数是一个包含一个元素的数组，并且该元素是一个流，而不是 VDOM 对象。

提供给div（或类似）函数的 ARRAY 必须包含 VDOM 对象（或返回 VDOM 对象的函数）。如：

div( [ p('1'), p('2'), p('3') ] ) // OR

div( [1,2,3].map(ii => p(ii))   ) // OR

let arr = [1,2,3]
div( arr.map(ii => p(ii))       )

STREAM 上的map方法采用一个函数，该函数将您从流上下文中切换出来。您实际上可以在此函数中使用流，但它们通常没有用，并且永远不能与数组互换。

stream$.map(         // <- stream
  function (elem) {  // <- leaving stream

    // regular javascript here
    // transform each element of the stream
    // and return it to the stream
    return elem
  }
)                    // <- back to stream
于 2018-02-24T13:04:50.617 回答
0

事实证明，使用 cycle.js 处理列表是出了名的困难。要做到这一点，您可以使用@cycle/collection库或映射数组元素并将它们组合成一个项目（这取决于您想要用它做什么）。

我解决了我的特殊情况：

const facilityVDom$ = facilityResponse$.map(facilities => ul(facilities.map(f => li(f.id))));

以下是一些相关的讨论：

于 2018-02-23T21:04:12.007 回答