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

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

作为一个方面的问题，我通常出现的实施例中目标的HTML div与#app或#main-container一个id，然后将沉被定义与@cycle/domdiv功能，从而一个div内产生AFAICT不必要div。我还没有找到关于如何定义虚拟节点的明确解释或参考。假设上面的DOM2以HTML form元素为目标，并且应该包含两个input元素。是否有开始与div在所有的例子，或可在input s内的.map呼叫直接定义，如果是这样，怎么样？

来源

2017-09-19 Joe Abbate

下面是两个独立的DOM的[ESNextbin]（https://esnextb.in/?gist=b54baa4131974b7f12d190fb63be8aeb）演示。 – bloodyKnuckles

谢谢@bloodyKnuckles。所以我想答案是*是*，你可以有两个或更多的DOM。但是，现在我的问题变成了“DOMs *具有独立性吗？”如您所提及的，并且如演示中所示，或者一个DOM至少可以被动地影响另一个DOM，例如DOM1中的输入字段和DOM2中的h1元素。我想我可以尝试一下。 –

没有什么阻止你在你的应用程序有一个DOM1和DOM2汇。 bloodyKnuckles'举个例子说明，完美https://esnextb.in/?gist=b54baa4131974b7f12d190fb63be8aeb

话虽这么说，我不知道我真正看到这样的地步。如果是性能问题，我认为你不会将应用程序的渲染分成两个DOMDrivers。虚拟DOM lib（在循环的情况下是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") 
})

这样你的这两个应用的一个清晰的关注分离。

现在回答你为什么需要被包裹在一个div一块虚拟DOM的问题。这是因为一块虚拟DOM必须具有一个单根元素。否则说：一块虚拟DOM必须是独立的（就像一个HTML文档只有一个单独的<html>元素）。这实际上是一个很好的约束，因为它迫使你拥有独立的组件。在你给（与<input>场）的例子，有在返回VDOM这样绝对没问题：

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

但是如果你的组件有一个input和label，那么你就需要把它包起来的另一个VNODE

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

来源

2017-09-20 08:59:10 atomrc

既不是表现也不是责任。我只是不愿意在JavaScript中编写大型静态区域（实际上是TypeScript）。但是，我现在意识到“静态”区域确实需要更新，因此分割区域的问题是没有实际意义的。 –

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

回答

相关问题