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为真时包含此模板，然后使用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
  }
});

onRendered在Meteor中找不到元素

1 个答案: