onRendered在流星中找不到元素

Question

I have a template

{{#if hasItems}}
  <ul id="myId">
    {{#each items}}
      {{> item}}
    {{/each}}
  </ul>
{{else}}
  <p>No items</p>
{{/if}}

and

Template.itemList.onRendered( function () {
  var el = this.find( '#myId' );
} );

but the element with id="myId" was never found because the template intially has no items, so the element <ul id="myId"> does not exists when the template was rendered.

What can I do to make sure the element exists when rendered?

I guess I can either put var el = this.find( '#myId' ); inside Tracker.autorun or make a nested template

<template name="hasItems">
  <ul id="myId">
    {{#each items}}
      {{> item}}
    {{/each}}
  </ul>
</template>

and include this template when hasItems is true and then use onRendered for hasItems instead of the outer template.

but isn't it a bit ugly hack?

Answer 1

Here's what you should do

Templates

<template name="itemList">
  {{#if hasItems}}
    {{> showItems }}
  {{else}}
    <p>No items</p>
  {{/if}}
</template>

<template name="showItems">
  <ul id="myId">
    {{#each items}}
      {{> item}}
    {{/each}}
  </ul>
</template>

Render Handler

Template.itemList.helpers({
  hasItems: function() { 
    // do you have items? 
  }
});

Template.showItems.onRendered(function (){
  var el = this.find( '#myId' );
});

Template.showItems.helpers({
  items: function() { 
    // return the items
  }
});