Cycle.jsでレンダリングされたすべてのDOMの後にjsコードを実行

Question

Cycle.jsアプリケーションに素敵なモーダルを表示するためにFoundationのrevealプラグインを使用したいと思います。

Webpackで再生して何時間も設定した後、財団のjsを私の（es6）アプリにインポートする方法を考えました。

しかし、私はバーチャルドームを扱っているので、ファンデーションのjを初期化すると実際のhtmlは存在しません。アプリが初期化されると予想されるように、物事は仕事、私はコンソールで$(document).foundation()を実行する場合、今

import Rx from 'rx'; 
import Cycle from '@cycle/core'; 
import {makeDOMDriver, div} from '@cycle/dom'; 
import ConfigurationModal from './components/ConfigurationModal/index'; 

require('./styles/index.scss'); 

function main(sources) { 
    const props$ = Rx.Observable.of({ 
     pomodoroDuration: 25 * 60, 
     shortBreakDuration: 5 * 60, 
     longBreakDuration: 15 * 60 
    }); 
    const configurationModal = ConfigurationModal({ 
     DOM: sources.DOM, 
     props$ 
    }); 

    return { 
     DOM: configurationModal.DOM, 
    }; 
} 

Cycle.run(main, { 
    DOM: makeDOMDriver('#app') 
}); 

：

import Rx from 'rx'; 
import {div} from '@cycle/dom'; 

import $ from 'jquery'; 
import {foundation} from 'foundation-sites/js/foundation.core'; 
import 'foundation-sites/js/foundation.util.keyboard'; 
import 'foundation-sites/js/foundation.util.box'; 
import 'foundation-sites/js/foundation.util.triggers'; 
import 'foundation-sites/js/foundation.util.mediaQuery'; 
import 'foundation-sites/js/foundation.util.motion'; 
import 'foundation-sites/js/foundation.reveal'; 

require('./styles/configuration-modal.scss'); 

function ConfigurationModal(sources) { 

    const values$ = sources.props$; 

    const vtree$ = Rx.Observable.just(1).map(() => { 
     return div(
      '#config-modal.reveal', 
      {attributes: { 
       'data-reveal': '' 
      }}, 
      ['hello'] 
     ); 
    }); 

    return { 
     DOM: vtree$, 
     values$ 
    }; 
} 

$(function() { 
    $.fn.foundation = foundation; 
    $(document).foundation(); 
}); 

export default ConfigurationModal; 

マイmain.js：

は、ここに私のコンポーネントのコードです。しかし、アプリケーションコードでは、DOMは仮想で、実際のhtmlはまだ注入されていないので、何も表示されません。

アプリが完全に初期化され、DOMに実際にデータが読み込まれた後にjsコードを実行するにはどうすればよいですか？

Answer 1

Cycleには、要素の更新を購読できるようにするDOMドライバの便利な機能があります。この場合

アプリは、次のように起動した後、あなたは、コードを実行することができます。

DOM 
.select(':root') 
.observable 
.take(1) 
.subscribe((element) => $(document).foundation()) 

あなたがメインにそれを追加することができ、そしてそれはあなたの問題を解決する必要があります。

しかし、Cycleでは、通常は副作用があるので、ドライバのサブスクリプションをすべてカプセル化するのは無駄です。

function startFoundation() { 
    $(document).foundation(); 
} 

function foundationDriver(sink$) { 
    return sink$.take(1).subscribe(startFoundation); 
} 

そして、あなたのmain.js中：この場合、あなたはそのように、財団を開始するためのドライバを作ることができます

function main(sources) { 
    // ... 

    const startup$ = sources.DOM.select(':root').observable.take(1); 

    return { 
     DOM: configurationModal.DOM, 

     FoundationStartup: startup$ 
    }; 
} 

Cycle.run(main, { 
    DOM: makeDOMDriver('#app'), 
    FoundationStartup: foundationDriver 
});