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

时间:2015-07-27 01:13:05

标签: jquery meteor iron-router semantic-ui

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

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

  where: 'client',

  action: function () {

    this.render('home');
  },

  onAfterAction: function () {

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

  }

});

基本上,$('#homeSidebar')应返回侧边栏元素,但由于HTML尚不可用,因此不返回任何内容。到目前为止,唯一的解决方案是改变像这样的功能

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

既不干净也不安全。一旦HTML可用,我该如何立即运行一个函数?

2 个答案:

答案 0 :(得分:3)

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

然而,您的具体示例看起来像是jQuery开发人员进入Meteor并直接应用jQuery模式的常见情况。通常在Meteor中,这是一种更简单的方法。

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

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

答案 1 :(得分:1)

You should use B12 C12 D12 E12 F12 G12 B13 C13 D13 E13 F13 G13 B14 C14 D14 E14 F14 G14 callback on the template. Meteor uses template onRendered for manipulating DOM. Iron Router is just for routing)
Your client/view.html:

helpers, events and callbacks

Your client/view.js:

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

  </div>
</template>