Nickdb93 Nickdb93 - 7 months ago 36
Javascript Question

Adding JQuery UI Resizable after Adding Object in Meteor

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

Answer

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();
});