0

到目前为止，我发现的所有 Cycle.js 示例都DOM在. 是否有可能拥有多个对象，例如一个名为“DOM1”和另一个名为“DOM2”的对象？这样做的目的是在一个 HTML 页面中控制两个独立的动态 DOM 区域，以保持第三个 DOM 区域静态定义在DOM1 和 DOM2 之间。driversrun(main, drivers)index.html

作为一个附带问题，我看到的示例通常div以 id 为#appor的 HTML 为目标#main-container，然后使用@cycle/dom div函数定义接收器，从而div在div. 我还没有找到关于虚拟节点应该如何定义的明确解释或参考。假设上面的 DOM2 以一个 HTMLform元素为目标，并且应该包含两个input元素。是否必须div像所有示例中一样以 a 开头，还是可以input直接在.map调用中定义 s，如果是，如何定义？

4

1 回答 1

1

没有什么可以阻止您在应用程序中使用DOM1和接收器。DOM2bloodyKnuckles 的例子完美地说明了https://esnextb.in/?gist=b54baa4131974b7f12d190fb63be8aeb

话虽如此，我不确定我是否真的明白这样做的意义。如果是性能问题，我认为将应用程序的渲染拆分为两个 DOMDriver 不会有太大收获。虚拟 DOM 库（在循环的情况下为 snabbdom）被定制为识别没有改变的 DOM 片段，这些片段具有并且仅更新后者。

如果是责任问题（这 2 块 DOM 有非常不同的目的），那么我宁愿创建两个不同的循环应用程序，它们都在 DOM 的不同部分呈现。（然后run在你的主文件中调用两次）

function app1(sources) {
  return {
    DOM: xs.of(div("hello from app1"))
  }
}


function app2(sources) {
  return {
    DOM: xs.of(div("hello from app2"))
  }
}

run(app1, {
  DOM: makeDOMDriver("#app1")
})


run(app2, {
  DOM: makeDOMDriver("#app2")
})

这样，您就可以清楚地分离两个应用程序的关注点。

现在回答您关于为什么需要将一段虚拟 DOM 包装在div. 这是因为一块虚拟 DOM 必须有一个根元素。换句话说：一块虚拟 DOM 必须是独立的（就像 HTML 文档只有一个<html>元素，即根）。实际上，这是一个很好的约束，因为它迫使您拥有独立的组件。在您给出的示例中（带有<input>字段），返回这样的 vDOM 绝对没有问题：

DOM: xs.of(input(/*...*/))

但是如果你的组件有 aninput和 a label，那么你需要将它包装在另一个 vNode 中

DOM: xs.of(div([label(/*...*/), input(/*...*/)])
于 2017-09-20T08:59:10.873 回答