Adding JQuery UI Resizable after Adding Object in Meteor

Question

When I add an object to a list of JQuery Resizable objects in my Meteor app, the object is not re-sizable until I refresh the page.

What kind of event listener or something should I add, and where?

I figured my code wasn't necessary for this question, but I will definitely put it up if requested.

Thanks, --Nick

EDIT: A note for future readers of this question (if any), I decided to go with ryanswapp:interactjs. Worked right out of the box. The less JQuery the better (in my opinion).

Answer 1

The most reliable way to init UI elements in a list is by creating a template for each item, then use the onRendered event of the template to execute the function.

list.html

...
<ul>
    {{#each items}}
        {{> ItemTemplate}}
    {{/each}}
</ul>
...

item-template.html

<template name="ItemTemplate">
    <li>
        <div class="resizable">
            {{content}}
        </div>
    </li>
</template>

item-template.js

Template.ItemTemplate.onRendered(function() {
    this.find('.resizable').resizable();
});