Zurb foundation 在Cycle.js中呈现所有dom后运行js代码

我想使用基金会的reveal插件在Cycle.js应用程序中显示一个漂亮的模式

在玩了几个小时的Webpack和它的配置之后，我想到了如何将foundation的js正确地导入到我的（es6）应用程序中

但是，因为我处理的是虚拟dom，所以在初始化foundation的js时，实际的html并不存在

以下是我的组件代码：

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;

My main.js：

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')
});

现在，如果我在应用程序初始化后在控制台中运行

$（document）.foundation（）

，一切都会正常工作。但是在应用程序代码中，由于dom是虚拟的，而实际的html还没有被注入，所以什么也没有出现

---

在应用程序完全初始化并实际填充dom之后，如何运行js代码？

在Cycle中，dom驱动程序有一个有用的功能，允许您订阅元素更新

在这种情况下，您可以在应用程序启动后运行以下代码：

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

你可以把它添加到你的主要任务中，这应该可以解决你的问题

然而，在循环中，将您的所有订阅封装在驱动程序中是非常困难的，因为它们通常是副作用。在这种情况下，可以让驱动程序启动基础，比如：

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

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

在main.js中：

function main(sources) {
    // ...

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

    return {
        DOM: configurationModal.DOM,

        FoundationStartup: startup$
    };
}

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

---

您可能需要虚拟dom小部件，这似乎很有趣，谢谢。@Widdershin:“root”是一个特殊的关键字吗？我尝试了代码并选择（':root'）返回一个null@patrick是，“：root”是特殊的，将选择应用程序的容器元素。这不起作用的原因可能是

.observable

现在是

.element（）

。我将更新我的答案以反映这一点：）