When using external javascript files within components what is the best method to pass data to a javascript file? Assuming components can be used multiple times on a single page I can't really use static IDs to target a specific element.

I guess I can use something like this and in my javascript run a for loop(?) to pass settings and data but it feels kind of hacky.

<script>
    window.components['{{ __SELF__.id }}'] = {
        id: '{{ __SELF__.id }}',
        foo: [
            '{{ bar }}',
            '{{ baz }}'
        ]
    };
</script>

And actually I'm not entirely sure, do css/js files get injected once or for each component instance?

the .htm file

<div class="custom-component"  data-title="the title" >
</div>

the .js file

 $('.custom-component').each(function ()
 {
        var $element = $(this);
        var title = $element.data('title');
        console.log("title =" +title );
 });

so you can replace "the title" by {{__SELF__.id }}

Last updated 7 years ago

Eventually I didn't need that, but thanks anyway