Question

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

作为一个附带问题，我见过的示例通常针对ID为div或#app的HTML #main-container，然后使用{{1定义接收器}} @cycle/dom函数，从而在div内创建AFAICT不必要的div。我还没有找到关于如何定义虚拟节点的明确解释或参考。假设上面的DOM2以HTML div元素为目标，并且应该包含两个form元素。是否以input开头，如同所有示例一样，或者div是否可以直接在input调用中定义，如果是，如何？

Answer 1

没有什么能阻止您在应用中使用DOM1和DOM2接收器。 bloodyKnuckles的例子说明了https://esnextb.in/?gist=b54baa4131974b7f12d190fb63be8aeb

话虽如此，我不确定我是否真的明白这一点。如果这是性能问题，我认为你不会在将应用程序的渲染分成两个DOMDrivers方面获得太多收益。虚拟DOM lib（在周期的情况下是snabbdom）是专门用来识别那些没有改变的DOM，而不是那些只改变后者的DOM。

如果这是一个责任问题（那两个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(/*...*/))

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

DOM: xs.of(div([label(/*...*/), input(/*...*/)])

Cycle.js驱动程序中可以有多个DOM对象吗？

1 个答案: