Calling $(document).foundation(); multiple times in Foundation

Issue

I’m using Foundation for the first time and using it inside an existing Angular Dart application.

Is it fine to call $(document).foundation(); more than once?

In my JS, I have the following:

document.addEventListener("onFoundationify", function(event){
    $(document).foundation();
});

and then inside my Angular component’s Dart code, I call

@override
ngAfterContentInit() {
    document.dispatchEvent(new CustomEvent("onFoundationify"));
}

So every Dart component fires this event on ngAfterContentInit which then calls $(document).foundation();

Is there a better way to foundationify an Angular Dart component that just appeared in the DOM or is what I’m doing fine / safe ?

Solution

This seems to be a cleaner way:

Angular Dart:

@override
ngAfterContentInit() {
    new Future.delayed(Duration.ZERO, (){
        document.dispatchEvent(new CustomEvent("onSetupAccordian"));
    });
}

JavaScript:

<script type="text/javascript">
    document.addEventListener("onSetupAccordian", function (event) {
        new Foundation.Accordion($("element-id-from-event"), {});
    });
</script>

This explicitly sets up the specific accordian instead of re-wiring everything.

Answered By – Jan Vladimir Mostert

Answer Checked By – Marilyn (FlutterFixes Volunteer)