0

これまでに見つけた Cycle.js の例はすべて、への引数DOMで「DOM」という名前の単一のオブジェクトを使用しています。「DOM1」という名前のオブジェクトと「DOM2」という名前のオブジェクトを複数持つことはできますか? これの目的は、単一の HTML ページ内で 2 つの別個の動的 DOM 領域を制御して、3 番目の DOM 領域を で静的に定義し、DOM1 と DOM2 の間に挟むことです。driversrun(main, drivers)index.html

副次的な質問として、私が見た例は通常、またはdivの id を持つ HTML をターゲットにしており、シンクは関数で定義されているため、内に不要な AFAICT を作成しています。仮想ノードがどのように定義されるべきかについての明確な説明や参照は見つかりませんでした。上記の DOM2 が HTML要素をターゲットにしており、それには 2 つの要素が含まれているとします。すべての例で as で始まる必要がありますか、それともs を呼び出しで直接定義できますか? もしそうなら、どのように?#app#main-container@cycle/dom divdivdivforminputdivinput.map

4

1 に答える 1

1

DOM1アプリでとDOM2シンクを使用することを妨げるものは何もありません。BloodyKnuckles の例は、それを完全に示しています https://esnextb.in/?gist=b54baa4131974b7f12d190fb63be8aeb

そうは言っても、これを行う意味が本当にわかっているかどうかはわかりません。パフォーマンスの問題であれば、アプリのレンダリングを 2 つの DOMDriver に分割してもあまりメリットはないと思います。仮想 DOM lib (cycle の場合は snabbdom) は、変更されていない DOM の断片と、後者を更新するだけの DOM の断片を認識するように調整されています。

それが責任の問題である場合 (これらの 2 つの DOM の目的は大きく異なります)、DOM の異なる部分でレンダリングする 2 つの異なるサイクル アプリを作成することをお勧めします。（そしてrun、メインファイルで2回呼び出します）

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>がルートである要素を 1 つしか持たないように)。スタンドアロン コンポーネントを強制的に使用する必要があるため、これは実際には良い制約です。あなたが（<input>フィールドで）与えた例では、次のようなvDOMを返すことにまったく問題はありません：

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

ただし、コンポーネントにinputとがあるlabel場合は、別の vNode でラップする必要があります。

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