javascriptractivejs

(Modal) Component in Loop

I am using the modal component for Ractive.js and some self written components as well.

They all work like a charm until I want to use them inside a loop:

{{# buildingTypes:index}}
    <button type="button" class="button full xs" on-click="@this.set('open_modal', true)">choose</button>

    {{#if index == 0}}
        <modal title="My first modal" basedon="{{open_modal}}">
            <p>Hello World!</p>
        </modal>
    {{/if}}
{{/buildingTypes}}

If I move the <modal> outside of the loop the modal works again. My assumption now is, that the component is unknown inside the loop.

How can I get the component to work inside the loop?

Solution

  • Allright, I got it working now.

    For the modal component I needed to enbale the option live: Controls whether the modal renders dynamically or stays hidden in the DOM.

    For my custom components I needed to update my Ractive instance ractive.update('buildingTypes').