/ / Ausführen von Js-Code nach allem dom in Cycle.js gerendert - zub-foundation, ecmascript-6, reaktive Programmierung, cyclejs, virtual-dom

Running js Code nach allem dom in Cycle.js gerendert - zub-foundation, ecmascript-6, reaktive Programmierung, cyclejs, virtual-dom

Ich möchte das Enthüllungs-Plugin von Foundation verwenden, um ein schönes Modal in einer Cycle.js App anzuzeigen.

Nachdem ich stundenlang mit dem Webpack und seiner Konfiguration gespielt hatte, dachte ich mir, wie ich Foundation's js in meine (es6) App importieren könnte.

Da ich mich jedoch mit virtuellem dom befasse, existiert das eigentliche html nicht, wenn founds js initialisiert wird.

Hier ist der Code meiner Komponente:

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;

Meine 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")
});

Jetzt, wenn ich renne $(document).foundation() Sobald die App in der Konsole initialisiert ist, funktionieren die Dinge wie erwartet. Da im App-Code dom jedoch virtuell ist und der eigentliche HTML-Code noch nicht eingegeben wurde, wird nichts angezeigt.

Wie kann ich den JS-Code ausführen, nachdem die App vollständig initialisiert wurde und die Domäne tatsächlich ausgefüllt wurde?

Antworten:

12 für die Antwort № 1

In Cycle gibt es eine nützliche Funktion des DOM-Treibers, mit der Sie Updates für Elemente abonnieren können.

In diesem Fall können Sie Code ausführen, nachdem die App wie folgt gestartet wurde:

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

Sie können das zu Ihrem Haupt hinzufügen, und das sollte Ihr Problem lösen.

In Cycle ist es jedoch idomatisch, alle Ihre Abonnements in Treiber zu kapseln, da sie normalerweise Nebenwirkungen sind. In diesem Fall können Sie einen Treiber zum Starten von Foundation erstellen:

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

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

Und in deinem 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
});