/ / Spustenie kódu js po tom všetkom poskytnutom v Cycle.js - zurb-foundation, ecmascript-6, reaktive-programming, cyclejs, virtual-dom

Spustenie js kódu po všetkých dom poskytovaných v Cycle.js - zurb-základ, ecmascript-6, reaktiv-programovanie, cyclejs, virtual-dom

Chcem použiť doplnok odhalenia nadácie na zobrazenie peknej modality v aplikácii Cycle.js.

Po prehraní s Webpackom a jeho konfiguráciou po dobu niekoľkých hodín som si myslela, ako vlastne importovať základy js v mojom (es6) app.

Keďže sa však zaoberám virtuálnym domom, skutočný html neexistuje pri inicializácii nadácie js.

Tu je môj komponentný kód:

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;

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

Teraz, keď bežiem $(document).foundation() v konzole po inicializácii aplikácie fungujú veci podľa očakávania. Ale v kóde aplikácie, pretože dom je virtuálny a skutočný html ešte nebol vstreknutý, nič sa neobjaví.

Ako by som mohol spustiť kód js po úplnej inicializácii aplikácie a skutočnom obsadení domova?

odpovede:

12 pre odpoveď č. 1

V cykle je užitočná funkcia ovládača DOM, ktorá umožňuje prihlásiť sa na odber aktualizácií pre prvky.

V tomto prípade môžete spúšťať kód po spustení aplikácie takto:

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

Mohli by ste to pridať k hlavnému menu a to by malo vyriešiť váš problém.

Avšak v cykle je idomaticky zapuzdrené všetky vaše predplatné v ovládačoch, pretože zvyčajne sú vedľajšie účinky. V tomto prípade môžete vytvoriť vodiča na spustenie nadácie, a to takto:

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

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

A vo vašom 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
});