CODEWITHSUNDEEP
meteor
mois
mois

Reputation: 55

How to call something after DOM changed in meteor?

Template.onRendered :

Callbacks added with this method are called once when an instance of Template.myTemplate is rendered into DOM nodes and put into the document for the first time.

Is there any way to call something after the DOM changed?

For example, a navbar(header) with login/logout button is rendered after user open the homepage, and the navbar is changed after the user logged in(logout button).

I need to do something after the navbar has been changed.

Upvotes: 4

Views: 249

Answers (1)

saimeunt
saimeunt

Reputation: 22696

You can refactor your code by creating new templates to introduce finer grained lifecycle events on child templates.

HTML

<template name="navbar">
  <div class="navbar">
    {{#if currentUser}}
      {{> logoutButton}}
    {{else}}
      {{> loginButton}}
    {{/if}}
  </div>
</template>

<template name="loginButton">
  <button class="login">Login</button>
</template>

<template name="logoutButton">
  <button class="logout">Logout</button>
</template>

JS

Template.loginButton.onRendered(function(){
  // will print Login after user logged out
  console.log(this.$("button").text());
});

Template.logoutButton.onRendered(function(){
  // will print Logout after user logged in
  console.log(this.$("button").text());
});

Alternatively, you can use an autorun inside Template.navbar.onRendered to listen to user login/logout and perform actions after DOM has been modified using Tracker.afterFlush.

HTML

<template name="navbar">
  <div class="navbar">
    {{#if currentUser}}
      <button class="logout">Logout</button>
    {{else}}
      <button class="login">Login</button>
    {{/if}}
  </div>
</template>

JS

Template.navbar.onRendered(function(){
  // declare a new reactive computation
  // (rerun when the reactive data source is modified)
  this.autorun(function(){
    // listen to the same reactive data source as in the template helper
    // => currentUser
    var user=Meteor.user();
    // this code will run after every other reactive computations depending
    // on the same data source being modified
    Tracker.afterFlush(function(){
      // will print Logout after user logged in
      // will print Login after user logged out
      console.log(this.$("button").text());
    }.bind(this));
  }.bind(this));
});

Upvotes: 1

Related Questions