在 Iron Router this.render() 之后访问 HTML

Question

我需要在新呈现的模板上应用一些语义 UI，但我不知道如何从路由器获取呈现的 HTML。这是我的代码：

Router.route('/', {
  name: 'home',

  where: 'client',

  action: function () {

    this.render('home');
  },

  onAfterAction: function () {

    console.log( $('#homeSidebar') );

  }

});

基本上，$('#homeSidebar') 应该 return 侧边栏元素，但是 return 没什么，因为 HTML 还不可用。到目前为止，唯一的解决方案是像这样更改函数

  onAfterAction: function () {
    setTimeout(function () {
      $('#homeSidebarToggle').on('click', function () {
        $('#homeSidebar').sidebar('toggle');
      });
    }, 200);    
  }

既不干净也不安全。如何在 HTML 可用后立即运行一个函数？

Answer 1

您可以查看 tracker.afterFlush 以在处理完所有无效计算后将代码安排到运行。

但是您的具体示例看起来像是 jQuery 开发人员进入 Meteor 并直接应用 jQuery 模式的常见案例。通常在 Meteor 中有更简单的方法。

将事件处理程序附加到模板的更简单更好的方法是使用 template events。你的情况：

Template.home.events({
  'click #homeSidebarToggle': function(ev){
    $('#homeSidebar').sidebar('toggle');
  }
});

Answer 2

您应该在模板上使用 onRendered 回调。 Meteor 使用模板 helpers, events and callbacks 来操作 DOM。 Iron Router 仅用于路由)
你的 client/view.html:

<template name="home">
  <div id="homeSidebar">

  </div>
</template>

你的client/view.js:

Template.home.onRendered(function () {
  console.log($('#homeSidebar'));
});

在 Iron Router this.render() 之后访问 HTML

Access HTML after this.render() in Iron Router

jquery

meteor

iron-router

semantic-ui