onRendered在流星中找不到元素

Question

我有一个模板

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

和

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

但由于模板最初没有任何项目，因此从未找到id="myId"的元素，因此呈现模板时元素<ul id="myId">不存在。

如何确保渲染时元素存在？

我猜我可以放var el = this.find( '#myId' ); 在Tracker.autorun内部或制作嵌套模板

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

并在hasItems为true时包括此模板，然后对hasItems使用onRendered代替外部模板。

但这不是丑陋的骇客吗？

Answer 1

这是你应该做的

范本

<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>

渲染处理程序

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