Problem: #each & js initialized front end components

help
1

I have been looking for 2 days now for a solution that brings reactive updates of cursors in #each statements and js initalized front end components (e.g. semanticUI-accordion) together.

{{#each player}}
        <div class="component that needs init">
            {{this}}
        </div>
    {{/each}}

Now when I initialize this onRendered, it works until new elements are added. Those are then not being initialized. How do I in a clean way initialize the component when new elements are added/removed. Preferably how do I run a function after the modifications have been made. So that the following would also work:

<div class="component that needs init to sort elements under it">
        {{#each player}}
            <div>
                {{this}}
            </div>
        {{/each}}
    </div>

Note: The component has to be reinitialized once after modifications have been made.

Thank you already

2

http://docs.meteor.com/#/full/observe

1 Like
3

But that is just like Tracker.autorun just a workaround. Is there no clean way to add a change event to the #each or something similar?

4

well, put template inside #each and that template will fire onRendered when his DOM part will be ready.

1 Like
5

True that works, thank you!
But what about the second case?
I also keep asking since Iā€™m looking for a general solution to this fairly common problem. It would be perfect for example if I could somehow build a plugin that allows me to specify these init functions in an easy ,clean yet generic enough manor.
So that I could write the following:

<div class="component that needs init to sort elements under it">
    {{#each player onInsert=helperFunctionThatInitsTheElement onChange=helperFunctionThatUpdatesTheWholeElement}}
         <div class="component that needs init">
              {{this}}
         </div>
    {{/each}}
</div>
6

it need action in same onRendered as the 1st case, difference is just in DOM selector.
Most of the time there is better meteor way, but hard to comment on anonymous external framework.